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.

notbrain
  • 3,366
  • 2
  • 32
  • 42
  • I got the same issue, do you find any solution/workaround? – Roy Ling Mar 26 '15 at 01: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. – notbrain Mar 26 '15 at 15:59
  • the version incompatibility is possible cause, just checked the deps of angular-bootstrap as `"angular": ">=1 <1.3.0"` – Roy Ling Mar 31 '15 at 06:00
  • 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). – mbursill Apr 02 '15 at 19:23
  • @mbursill yeah I was using a modal as well, but the datepicker was not in the modal, it was in the main page; the modal had a form/button that would send to another page, that's when i got the error (IIRC) – notbrain Apr 23 '15 at 18:22
  • Experiencing the same issue, but with 1.2.28. Date picker is currently within a directive being used in an ng-repeat and displayed according to an ng-switch. – JcT Apr 24 '15 at 05:33
  • Followup: I had been overriding the `daypickerDirective` templateURL similarly to http://stackoverflow.com/a/26339919/446030. If I stopped overriding the templateUrl, it would return to working ok (except for a second issue, discussed below). However I found a workaround - also overriding the templateUrl of `datepickerDirective` seemed to resolve it. I don't entirely understand why, and haven't pondered the implications yet. A second issue that cropped up alongside this was the directive ignoring datepicker-options; it would, however, recognise if set globally via datepickerConfig. Sigh. – JcT Apr 24 '15 at 06:25
  • 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. – Strawberry May 01 '15 at 05:32
  • if there is some another directive called 'daypicker' maybe... – BotanMan Jul 07 '15 at 07:26
  • Could someone post a link to the version of ui-bootstrap-tpls.js we are talking about? – Buh Buh Jul 12 '15 at 14:51
  • 6
    Is this reproducible in a jsFiddle or Plunker? – malix Jul 21 '15 at 14:39

3 Answers3

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";
}
Thomas
  • 2,127
  • 1
  • 32
  • 45
  • 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. – notbrain Jan 05 '16 at 01:42
0

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

Manij Rai - ITH
  • 59
  • 2
  • 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. – notbrain Oct 26 '15 at 17:44
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>
Jimmy
  • 1
  • 1