ngModel 及其使用方式 [英] ngModel and How it is Used

问题描述

我刚刚开始使用 angular 并遇到了下面的指令.我已经阅读了一些教程，现在正在阅读一些教程，但我真的不明白require: ngModel"是做什么的，主要是因为我不知道 ngModel 总体上做了什么.现在，如果我不是疯了，它是提供两种方式绑定的同一个指令(整个 $scope.blah = "blah blah" 在 ctrl 中，然后 {{blah}} 在受控的 html 元素中显示 'blah blah'通过指令.

I am just getting started with angular and ran into the directive below. I read a few tutorials already and am reading some now, but I really don't understand what "require: ngModel" does, mainly because I have no idea what ngModel does overall. Now, if I am not insane, it's the same directive that provides two way binding (the whole $scope.blah = "blah blah" inside ctrl, and then {{blah}} to show 'blah blah' inside an html element controlled by directive.

这对我没有帮助.此外，我不明白 "model: '@ngModel' 的作用.@ngModel 暗示父作用域上的变量，但 ngModel 不是那里的变量.

That doesn't help me here. Furthermore, I don't understand what "model: '@ngModel' does. @ngModel implies a variable on the parents scope, but ngModel isn't a variable there.

tl;博士:

1. require: ngModel"有什么作用?
2. 模型:'@ngModel'"有什么作用?

*auth 是传递配置文件的 dateFormat 属性的服务(与 q 无关)

*auth is a service that passes profile's dateFormat property (irrelevant to 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();
            });
        }
    };
});

推荐答案

ngModel 是一个负责数据绑定的 Angular 指令.通过其控制器 ngModelController，可以创建渲染和/或更新模型的指令.

ngModel is an Angular directive responsible for data-binding. Through its controller, ngModelController, it's possible to create directives that render and/or update the model.

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

Take a look at the following code. It's a very simple numeric up and down control. Its job is to render the model and update it when the user clicks on the + and - buttons.

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

工作Plunker

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

Since it interacts with the model, we can use ngModelController. To do that, we use the require option to tell Angular we want it to inject that controller into the link function as its fourth argument. Now, ngModelController has a vast API and I won't get into much detail here. All we need for this example are two methods, $render and $setViewValue, and one property, $modelValue.

$render 和 $setViewValue 是同路的两种方式.$render 每次模型在其他地方更改时都会被 Angular 调用，以便指令可以(重新)渲染它，并且每次用户执行该指令时都应该调用 $setViewValue应该改变模型值的东西.而 $modelValue 是模型的当前值.其余代码几乎一目了然.

$render and $setViewValue are two ways of the same road. $render is called by Angular every time the model changes elsewhere so the directive can (re)render it, and $setViewValue should be called by the directive every time the user does something that should change the model's value. And $modelValue is the current value of the model. The rest of the code is pretty much self-explanatory.

最后，ngModelController 有一个可以说的缺点:它不能很好地处理引用"类型(数组、对象等).因此，如果您有一个绑定到数组的指令，并且该数组稍后更改(例如，添加了一个项目)，Angular 将不会调用 $render 并且该指令不会知道它应该更新模型表示.如果您的指令向/从数组中添加/删除项目并调用 $setViewValue 也是如此:Angular 不会更新模型，因为它会认为没有任何改变(尽管数组的内容已经更改，其引用保持不变).

Finally, ngModelController has an arguably shortcoming: it doesn't work well with "reference" types (arrays, objects, etc). So if you have a directive that binds to, say, an array, and that array later changes (for instance, an item is added), Angular won't call $render and the directive won't know it should update the model representation. The same is true if your directive adds/removes an item to/from the array and call $setViewValue: Angular won't update the model because it'll think nothing has changed (although the array's content has changed, its reference remains the same).

这应该会让你开始.我建议您阅读 ngModelController 文档 和 官方指令指南，以便您更好地了解这一切是如何运作的.

This should get you started. I suggest that you read the ngModelController documentation and the official guide on directives so you can understand better how this all works.

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

P.S: The directive you have posted above isn't using ngModelController at all, so the require: 'ngModel' line is useless. It's simply accessing the ng-model attribute to get its value.

这篇关于ngModel 及其使用方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！