datepicker的AngularJS自定义指令不更新ng-model

时间:2015-06-29 17:53:53

标签: javascript angularjs

我检查了所有类似主题的开放式问题,但都没有给我正确的工作解决方案,这让我发疯,这就是我打开这个问题的原因。

我的自定义指令看起来像

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();
                });
            }
        });
    }
  };
});

我使用像这样的指令

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

在控制器中我有类似的东西:

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

然而,指令不会更新$ scope.jumpDate并且它总是未定义的,即使我在控制器中设置默认值它永远不会更新,dateText也有正确的值。

我正在使用angular build 1.4.1

1 个答案:

答案 0 :(得分:1)

我会检查指令的范围值。我猜测ng-model正在设置隔离范围的值,而不是控制器。

或尝试使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
  <li class="ln-a">
    <a href="#">A text</a>
  </li>
  <li class="ln-a">
    <a href="#">A1 text</a>
  </li>
    <li class="ln-a">
    <a href="#">A2 text</a>
  </li>
  <li class="ln-b">
    <a href="#">B text</a>
  </li>
</ul>