require: 'ngModel' 的含义是什么? [英] What's the meaning of require: 'ngModel'?

问题描述

这是我的指令的 HTML:

This is the HTML for my directive:

<textarea data-modal="modal" data-mydir ng:model="abc"></textarea>

在我的指令中，我有这个:

In my directive I have this:

return {
  require: 'ngModel',
  replace: true,
  scope: {
    modal: '=modal',
    ngModel: '=',
    pid: '=pid'
  }
}

谁能告诉我，require: ngModel 的意义是什么?我在许多不同的指令中看到了这一点.我可以称之为数据模式吗?

Can someone tell me, what's the significance of require: ngModel ? I see this in many different directives. Could I call this data-modal?

我很困惑，因为当我将其更改为 data-modal 时，我收到来自 Angular 的消息

I am confused because when I change it to data-modal I get a message from Angular saying

Controller 'ngModel', required by directive 'textarea', can't be found!

推荐答案

require 指令为您提供指令的控制器，您将其命名为 link 的第四个参数功能.(您可以使用 ^ 在父元素上查找控制器；? 使它成为可选的.)所以 require: 'ngModel' 给你ngModel 指令的控制器，这是一个 ngModelController.

The require instruction gives you the controller for the directive you name as the fourth argument to your link function. (You can use ^ to look for the controller on a parent element; ? makes it optional.) So require: 'ngModel' gives you the controller for the ngModel directive, which is an ngModelController.

可以编写指令控制器来提供其他指令可以使用的 API；使用 ngModelController，您可以访问 ngModel 内置的特殊功能，包括获取和设置值.考虑以下示例:

Directive controllers can be written to provide APIs that other directives can use; with ngModelController, you get access to special functionality that's built into ngModel, including getting and setting the value. Consider the following example:

<input color-picker ng-model="project.color">

app.directive('colorPicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the ngModel whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            ngModel.$setViewValue(newValue);
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      ngModel.$render = function() {
        element.val(ngModel.$modelValue);
        element.change();                
      };
    }
  }
});

该指令使用 ngModel 控制器从颜色选择器获取和设置颜色值.请参阅此 JSFiddle 示例:http://jsfiddle.net/BinaryMuse/AnMhx/

This directive uses the ngModel controller to get and set the value of the color from the colorpicker. See this JSFiddle example: http://jsfiddle.net/BinaryMuse/AnMhx/

如果您使用 require: 'ngModel'，您可能不应该也在您的应用程序中使用 ngModel: '='隔离范围；ngModelController 为您提供更改值所需的所有访问权限.

If you're using require: 'ngModel', you probably shouldn't also be using ngModel: '=' in your isolate scope; the ngModelController gives you all the access you need to change the value.

AngularJS 主页 上的底部示例也使用了此功能(除了使用自定义控制器，而不是 ngModel).

The bottom example on the AngularJS homepage also uses this functionality (except using a custom controller, not ngModel).

关于指令的大小写，例如ngModel vs ng-model vs data-ng-model:而Angular支持在 DOM 上使用多种形式，当您通过名称引用指令时(例如，在创建指令时，或使用 require)时，您总是使用名称的小写形式.

As for the casing of a directive, for example, ngModel vs ng-model vs data-ng-model: while Angular supports using multiple forms on the DOM, when you refer to a directive by name (for example, when creating a directive, or using require), you always use the lowerCamelCase form of the name.

这篇关于require: 'ngModel' 的含义是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！