Question

我刚开始使用angular并遇到下面的指令。我已经阅读了一些教程，现在正在阅读一些，但我真的不明白“require：ngModel”的作用，主要是因为我不知道整个ngModel是做什么的。现在，如果我不是疯了，那就是提供双向绑定的相同指令（整个$ scope.blah =“blah blah”在ctrl中，然后{{blah}}在html元素控制中显示'blah blah'通过指示。

这对我没有帮助。此外，我不明白“模型：'@ ngModel'的作用。@ ngModel暗示父作用域的变量，但ngModel不是那里的变量。

tl;博士：

“require：ngModel”做什么？
“model：'@ ngModel'”做什么？

* auth是一个传递profile的dateFormat属性（与q无关）的服务

提前感谢您的帮助。

angular.module('app').directive('directiveDate', function($filter, auth) {

    return {
        require: 'ngModel',
        scope:  {
            model : '@ngModel',
            search: '=?search'
        },
        restrict: 'E',
        replace: true,
        template: '<span>{{ search }}</span>',
        link: function($scope) {

            $scope.set = function () {
                $scope.text = $filter('date')($scope.model, auth.profile.dateFormat );
                $scope.search = $scope.text;
            };

            $scope.$watch( function(){ return $scope.model; }, function () {
                $scope.set();
            }, true );

            //update if locale changes
            $scope.$on('$localeChangeSuccess', function () {
                $scope.set();
            });
        }
    };
});

Answer 1

ngModel是负责数据绑定的Angular指令。通过其控制器ngModelController，可以创建呈现和/或更新模型的指令。

看看以下代码。这是一个非常简单的数字上下控制。它的工作是渲染模型并在用户点击+和-按钮时更新模型。

app.directive('numberInput', function() {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<span></span><button>+</button><button>-</button>',
    link: function(scope, element, attrs, ngModelCtrl) {
      var span = element.find('span'),
          plusButton = element.find('button').eq(0),
          minusButton = element.find('button').eq(1);

      ngModelCtrl.$render = function(value) {
        updateValue();
      };

      plusButton.on('click', function() {
        ngModelCtrl.$setViewValue(ngModelCtrl.$modelValue + 1);
        updateValue();
      });

      minusButton.on('click', function() {
        ngModelCtrl.$setViewValue(ngModelCtrl.$modelValue - 1);
        updateValue();
      });

      function updateValue(value) {
        span.html(ngModelCtrl.$modelValue);
      }
    }
  };
});

Working Plunker

由于它与模型交互，我们可以使用ngModelController。为此，我们使用require选项告诉Angular我们希望它将该控制器注入link函数作为其第四个参数。现在，ngModelController有一个vast API，我在这里不会详细介绍。我们在此示例中需要的只有两个方法$render和$setViewValue，以及一个属性$modelValue。

$render和$setViewValue是同一条道路的两种方式。每当模型在其他地方更改时，Angular都会调用$render，因此指令可以（重新）呈现它，并且每次用户执行应该更改模型值的内容时，指令都应调用$setViewValue。 $modelValue是模型的当前值。其余的代码几乎是不言自明的。

最后，ngModelController有一个可以说是缺点：它与“引用”类型（数组，对象等）不兼容。因此，如果您有一个绑定到数组的指令，并且该数组稍后更改（例如，添加了一个项），Angular将不会调用$render并且该指令不会知道它应该更新模型表示。如果你的指令在数组中添加/删除一个项目并调用$setViewValue，也是如此：Angular不会更新模型，因为它认为没有任何改变（尽管数组的内容已经改变，它的引用仍然是一样的。）

这应该让你开始。我建议您阅读ngModelController documentation和 official guide on directives，以便更好地了解这一切是如何运作的。

P.S：您上面发布的指令根本没有使用ngModelController，因此require: 'ngModel'行无用。它只是访问ng-model属性以获取其值。

ngModel及其使用方法

1 个答案: