且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

什么是都需要的含义:“ngModel”?

更新时间:2022-10-14 18:45:15

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

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

 <输入的颜色选择器NG模型=project.color>

  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.