AngularJS custom directive for datepicker do not update ng-model

Question

I checked all open questions with similar topic but neither gives me proper working solution which drives me crazy and that is why I opening this question.

My custom directive looks like

angular.module('angularSampleApp') .directive('datepicker', function() {
'use strict';

return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
        $(el).datepicker({
            maxDate: 0 ,
            onSelect: function(dateText) {
                scope.$apply(function(){
                    ngModel.$setViewValue(dateText);
                    ngModel.$viewValue = dateText;
                    ngModel.$render();
                });
            }
        });
    }
  };
});

I use directive like this

<input type="text" id="datepicker" datepicker ng-model="jumpDate">
<a name="jump" id="jump" title="Jump" ng-click="jumpToDate()">Jump</a>

and in controller I have something like this:

    $scope.jumpToDate = function() {
      console.log($scope.jumpDate);
  };

However directive do not update $scope.jumpDate and it's always undefined even if I set default value in controller it's never updated, dateText have proper value.

I'm using angular build 1.4.1

You only need ngModel.$setViewValue(dateText) and you don't need to wrap it into $scope.$apply. — a better oliver
– a better oliver, Commented Jun 29, 2015 at 18:09
possibly same as that of stackoverflow.com/a/29194068/2435473 — Pankaj Parkar
– Pankaj Parkar, Commented Jun 29, 2015 at 18:32

Cheyne · Accepted Answer · 2015-06-29 18:08:29Z

1

I would check the scope values on the directive. I'm guessing that ng-model is setting the value on the isolate scope, not the controller.

Or try using

ng-model="$parent.jumpDate"

answered Jun 29, 2015 at 18:08

Cheyne

2,1774 gold badges31 silver badges50 bronze badges

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

1 Comment

Razor Over a year ago

That creates a tight dependency doesn't it?

Collectives™ on Stack Overflow

AngularJS custom directive for datepicker do not update ng-model

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related