Angular Directive访问内部ng模型控制器

时间:2017-12-13 09:26:38

标签: javascript angularjs angularjs-directive angular-ngmodel

我有一个针对angular-moment-picker的自定义包装器指令。我使用cutrom模型属性(dp-model)和内部ng-model(dpModelObject)。我想访问此内部模型控制器以设置其原始和有效性属性。

有可能吗?



(function() {

	  angular.module('app').directive('datePicker', datePicker);

    datePicker.$inject = [];

    function datePicker() {
      return {
        restrict: 'E',
              scope: {
                  dpModel: '=',
                  dpRequired: '='
              },
              // replace: true,
              templateUrl: template.html,

              link: function($scope, $element, $attrs, ngModelCtrl)
              {
                  if ($scope.dpModel) {
                      $scope.dpModelFormatted = moment($scope.dpModel, 'YYYY-MM-DD').format('YYYY. MM. DD.');
                  }

                  $scope.$watch('dpModelObject', function(date) {
                      if (date) {
                          $scope.dpModel = moment(date).format('YYYY-MM-DD');
                      }
                  }, true);
              }
      };
	}

})();

<div class="input-group datepicker">
    <input type="text" class="form-control"
        moment-picker="dpModelFormatted"
        ng-model="dpModelObject"
        ng-required="dpRequired"
    >
    <span class="input-group-addon">
        <i class="glyphicon glyphicon-calendar"></i>
    </span>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您需要在指令定义对象中设置require属性。

来自文档:

  

需要另一个指令并将其控制器作为链接函数的第四个参数注入。

return {
    restrict: 'E',
    require: 'ngModel', // here
    scope: {
       ngModel: '=', // and call it by the attribute name
       dpRequired: '='
    },
    ....

然后,您的链接功能中的第4个参数将引用ngModelControllerthe official docs更详细地介绍