CODEWITHSUNDEEP
angularjsdatepickerangular-bootstrap
notbrain
notbrain

Reputation: 3396

Strange angular-ui datepicker dependency error

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.

Upvotes: 19

Views: 1928

Answers (3)

Jimmy
Jimmy

Reputation: 1

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>

Upvotes: 0

Thomas
Thomas

Reputation: 2137

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";
}

Upvotes: 1

Manij Rai - ITH
Manij Rai - ITH

Reputation: 59

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

Upvotes: 0

Related Questions