什么是都需要的含义：“ngModel”？ [英] What's the meaning of require: 'ngModel'?

问题描述

这是对我的指令中的HTML：

 ＆LT; textarea的数据模式=莫代尔数据MYDIR NG：模型=ABC＆GT;＆LT; / textarea的＆GT;
 

在我的指令，我有这样的：

  {回报
        要求：'ngModel'，
        更换：真实，
        范围： {
            模态：'=模态'，
            ngModel：'='，
            PID：'= PID
        }，
 

谁能告诉我，什么都需要的重要意义：ngModel？我看到这个在许多不同的指令。我可以把这个数据模态？

我很困惑，因为当我将其更改为数据模式，我从角得到一个消息说

 控制器ngM​​odel，由指令'textarea的'必需的，不能被发现！
 

解决方案

的要求指令给你你的名字作为第四个参数的指令控制器的链接功能。 （您可以使用 ^ 来寻找一个父元素控制器;？ 使得可选），所以要求：ngModel为您提供的 ngModel 指令控制器，的这是一个 ngModelController 。

指令控制器可以书面提供的API，其他指令可以使用​​;与 ngModelController ，您可以访问到内置于 ngModel 特殊功能，包括获取和设置值。请看下面的例子：

＆LT;输入的颜色选择器NG模型=project.color＆GT;


app.directive（'的ColorPicker'，函数（）{
  返回{
    要求：'ngModel'，
    链接：功能（范围，元素，ATTRS，ngModel）{
      element.colorPicker（{
        //初始化的颜色的颜色在范围
        pickerDefault：scope.color，
        //更新ngModel每当我们选择新的颜色
        onColorChange：功能（ID，为newValue）{
          范围。$应用（函数（）{
            ngModel $ setViewValue（newValue）以。
          }）;
        }
      }）;      //更新拾色器上时范围的变化值
      ngModel。$ =渲染功能（）{
        element.val（ngModel $ modelValue）;
        element.change（）;
      };
    }
  }
}）;


该指令使用 ngModel 控制器来获取和设置从颜色拾取颜色的值。看到这个的jsfiddle例如： http://jsfiddle.net/BinaryMuse/AnMhx/

如果你使用要求：ngModel，你可能不应该的也的是使用 ngModel： '='在隔离范围;在 ngModelController 为您提供您需要更改值的所有访问。

在的AngularJS首页也使用此功能（除了使用自定义控制器，而不是 ngModel ）。

---

对于指令的外壳，例如 ngModel VS NG-模型 VS 数据-NG-模型：在使用了DOM多种形式角支撑，当您通过名称引用指令（例如，创建一个指令时，也可以使用要求），你总是使用名称的lowerCamelCase形式。

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'
        },

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

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!

解决方案

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.

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

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/

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.

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

---

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.

这篇关于什么是都需要的含义：“ngModel”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！