ngModel及其使用方法

Question

我刚从角度开始，并遇到了下面的指令。我已经读过一些教程，现在也正在阅读一些教程，但我真的不明白"require: ngModel“做什么，主要是因为我不知道ngModel总体上做什么。现在，如果我不是疯了，也是同一个指令提供了双向绑定( ctrl中的整个$scope.blah = " blah“，然后{blah}在由指令控制的html元素中显示'blah blah‘)。

这对我没什么帮助。此外，我不明白什么是“模型：@ngModel”。@ ngModel意味着父级作用域上的变量，但是ngModel并不是一个变量。

tl;dr：

1. “需要: ngModel”做什么？
2. “模型：@ngModel”做什么？

*auth是传递配置文件的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是一个角度指令，负责数据绑定.通过它的控制器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);
      }
    }
  };
});

工作柱塞

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

$render和$setViewValue是同一条路的两条路。每次模型在其他地方发生变化时，都会以角的方式调用$render，这样指令就可以(重新)呈现它，并且每当用户做了应该改变模型值的事情时，这个指令就应该调用$setViewValue。$modelValue是模型的当前值。代码的其余部分几乎是不言自明的。

最后，ngModelController有一个可以争论的缺点:它不能很好地处理“引用”类型(数组、对象等)。因此，如果您有一个绑定到某个数组的指令，并且该数组后来发生了更改(例如，添加了一个项)，那么角将不会调用$render，并且该指令将不知道它应该更新模型表示。如果您的指令从数组中添加/移除一个项并调用$setViewValue：Angular不会更新模型，这也是一样的，因为它会认为什么都没有改变(尽管数组的内容已经改变了，但是它的引用保持不变)。

这应该能让你开始。我建议您阅读ngModelController文档和关于指示的正式指南，以便更好地理解这一切是如何工作的。

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