require的含义是什么:'ngModel'？

Question

这是我的指令的HTML:

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

在我的指令中我有这个:

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

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

我感到困惑,因为当我将其更改为数据模式时,我收到了来自Angular的消息

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

Answer 1

该require指令为您指定了作为link函数的第四个参数的指令的控制器.(您可以使用^在父元素上查找控制器; ?使其成为可选.)因此,require: 'ngModel'为您提供ngModel指令的控制器,这是一个ngModelController.

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

<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/

如果你使用require: 'ngModel',你可能不应该也可以用ngModel: '='在您的分离范围; 在ngModelController为您提供您需要更改值的所有访问.

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

至于指令的大小,例如ngModelvs ng-modelvs data-ng-model:当Angular支持在DOM上使用多个表单时,当你通过名称引用指令时(例如,在创建指令或使用时require),你总是使用lowerCamelCase形式的名称.

Answer 2

如创建自定义指令文档中所述:( 首先在评论中提出您的问题)

我可以data-ng-model改为吗？

答案:

最佳实践:首选使用划线分隔格式(例如ng-bindfor ngBind).如果要使用HTML验证工具,可以使用data-prefixed版本(例如data-ng-bindfor ngBind).上面显示的其他表单因遗留原因而被接受,但我们建议您避免使用它们.

例子:

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

其次,?ngModel代表什么？

// Always use along with an ng-model
require: '?ngModel',

使用指令时,它会强制它与属性/控制器一起使用ng-model.

该require设置

(摘自Brad Green&Shyam Seshadri的 AngularJS 一书)

其他指令可以使用require属性语法将此控制器传递给它们.完整形式的要求如下:

require: '^?directiveName'

选项:

1. directiveName

   这个以驼峰为基础的名称指定了控制器应该来自哪个指令.因此,如果我们的<my-menuitem>指令需要在其父节点上找到控制器<my-menu>,我们将其写为myMenu.

2. ^

   默认情况下,Angular从同一元素上的named指令获取控制器.添加此可选^符号表示还要向上走DOM树以查找指令.例如,我们需要添加此符号; 最后的字符串是^myMenu.

3. ?

   如果找不到所需的控制器,Angular将抛出异常来告诉您该问题.向?字符串添加符号表示此控制器是可选的,如果未找到则不应抛出异常.虽然听起来不太可能,但如果我们想让<my-menu-item>s在没有<mymenu>容器的情况下使用,我们可以将它添加到最终的require字符串中?^myMenu.

Answer 3

在require:'ngModel'和require:'^ngModel'允许你注入附着在其上的指令绑定到元素或父元素模型.

它基本上是将ngModel传递给链接/编译函数而不是使用范围选项传递它的最简单方法.一旦您有权访问ngModel,您可以使用更改其值,使用$setViewValue脏/清理$formatters,应用观察者等.

下面是一个简单的示例,用于传递ngModel并在5秒后更改其值.

演示:http://jsfiddle.net/t2GAS/2/

myApp.directive('myDirective', function($timeout) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$render = function() {
            $timeout(function() {
                ngModel.$setViewValue('StackOverflow');  
            }, 5000);                
        };
    }
  };
});