19

Just re-installed some bower components but the components in question here were not updated, same 0.12.0 ui.bootstrap. Also using ui-router 0.2.13 to change state to another page.

The odd error message is

Error: [$compile:ctreq] Controller 'datepicker', required by directive 'daypicker', can't be found!

But when I look at the ui-bootstrap-tpls.js file, the datepicker controller is defined directly above daypicker, and should be picked up.

Could this be cause by an errant conflicting datepicker classname or something?

I know this is not much to go on but will update as I have time to add code. Seems like there might be a conflicting datepicker somewhere. It only happens on stateChange from one page to another. A complete flow of using the datepicker works fine until this last page. How can a controller dependency get missed if it's in the same file?

On the off chance anyone has seen this before, I'd be grateful for any guidance.

UPDATE Apr 23 15: was using a modal dialog with a form that would send the user to another page on OK click.

Improve this question
11
  • I got the same issue, do you find any solution/workaround? Commented Mar 26, 2015 at 1:21
  • @RoyLing nope, I managed a workaround that didn't use the same controller to avoid the error. My other guesses were it might be something to do with angular-ui not being fully compatible with angular 1.3.x yet. Beyond that I was out of ideas. I tried to replicate in a fiddle/plunker but couldn't reproduce. Commented Mar 26, 2015 at 15:59
  • 1
    Hit this problem when using the datepicker inside a modal popup. A workaround was to use an ng-if (on a parent element of the datepicker) and resolve it to true after a short timeout (250ms). Commented Apr 2, 2015 at 19:23
  • 1
    ui-bootstrap stores all the templates into the templateCache, if for some reason that was cleared before the compile then it could throw this error since it's not actually there. Commented May 1, 2015 at 5:32
  • 6
    Is this reproducible in a jsFiddle or Plunker? Commented Jul 21, 2015 at 14:39

3 Answers 3

Reset to default
1

I had this error updating to ui.bootstrap 0.14.x.

I had overwritten the templates in own modules which caused the problems:

    angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/datepicker/datepicker.html",
      "<div ng-switch=\"datepickerMode\" role=\"application\" ng-keydown=\"keydown($event)\">\n" +
      "  <daypicker ng-switch-when=\"day\" tabindex=\"0\"></daypicker>\n" +
      "  <monthpicker ng-switch-when=\"month\" tabindex=\"0\"></monthpicker>\n" +
      "  <yearpicker ng-switch-when=\"year\" tabindex=\"0\"></yearpicker>\n" +
      "</div>");
    }]);

After removing the modules it worked again.

Originally I had changed the templates for using font-awesome icons instead of glyphicons. Now I override the glyphicon css class to change to font-awesome icons:

.glyphicon {
    font: normal normal normal 14px/1 ourIconFont;
}
.glyphicon-arrow-right:before,
.glyphicon-chevron-right:before {
    content: "\f054";
}
.glyphicon-arrow-left:before,
.glyphicon-chevron-left:before {
    content: "\f053";
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This was also what I was doing. But even after re-adding the template cache and modifying for FontAwesome again in the upgrade, it was still an issue. Just don't have the wherewithal to verify anymore, code is old and dusty! But have an upvote.
0

You need to update your ui.bootstrap.0.12.0.js to ui-bootstrap-tpls-0.13.3.js

Improve this answer

1 Comment

Thanks, but this issue predates 0.13.3 by about 4 months. Might not ever be solved given the complexity and interplay of various controls. Might even be fixed in newer versions but "wait for an update" wasn't an option back then.
0

Had the same issue, our solution was that after upgrading to uib 0.14 we had a custom template for datepicker and had to add the uib- prefixes to the child directives inside the datepicker (day, month year). e.g. 

<div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
  <daypicker ng-switch-when="day" tabindex="0"></daypicker>
  <monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
  <yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
</div>

Changed to

<div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
  <uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker>
  <uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker>
  <uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker>
</div>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.