Angular JS Custom Directive not Working

Question

I am trying to implement a directive in my app. Here is the following code.

    console.log("Directive loaded");
    angular.module("MyApp")
       .directive("datepickerLocal", function($rootScope) {
       console.log("datepickerLocal");
       return {
          restrict: 'E',
          require: 'ngModel',
          link: function(scope, elem, attr, ctrl) {
          ctrl.$parsers.unshift(function(viewValue) {
            var ngModelController = ctrls[0];
            ngModelController.$parsers.push(function (viewValue) {
               viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
               return viewValue.toISOString().substring(0, 10);
            });
         });
       }
    };
  }
 );

And here is the HTML text field.

    <input id="datepicker" type="text" data-ng-datepicker data-ng-options="datepickerOptions" ng-model="user.User.DateOfBirth" datepickerLocal>

I am able to see the first console message, but howeven the console message inside the directive is not appearing.

Feedback will be much appreciated.

ms87 · Accepted Answer · 2014-10-09 12:17:54Z

1

2 things:

Your'e restricting the directive to E, saying it should be defined as an element, but you're using it an an attribute. Either change restrict: "E" to A or EA, or use it like:

Directives need to be camel cased when used in html, that is:

datepickerLocal is wrong, should be : datepicker-local

answered Oct 9, 2014 at 12:17

ms87

17.5k23 gold badges89 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LS2 Over a year ago

Thanks.. datepicker-local was something i should have recognised but overlooked.

Collectives™ on Stack Overflow

Angular JS Custom Directive not Working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related