要求：'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 的意义是什么？我在许多不同的指令中看到了这一点。我可以称之为数据模式吗？

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

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

Answer 1

require 指令为您提供了您命名为link 函数的第四个参数的指令的控制器。 （您可以使用^ 在父元素上查找控制器；? 使其成为可选。）所以require: 'ngModel' 为您提供ngModel 指令的控制器which is an 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 为您提供更改值所需的所有访问权限。

the AngularJS homepage 的底部示例也使用此功能（除了使用自定义控制器，而不是 ngModel）。

---

至于指令的大小写，例如ngModel vs ng-model vs data-ng-model：虽然Angular支持在DOM上使用多种形式，但当您通过名称引用指令时（例如，在创建一个指令，或者使用require)，你总是使用名称的小写形式。

Answer 2

如Creating Custom Directives 文档中所述：（首先在评论中回答您的问题）

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

答案：

最佳实践：首选使用破折号分隔的格式（例如，ng-bind 用于 ngBind）。如果你想使用 HTML 验证工具，你可以改用data-前缀版本（例如data-ng-bind 代表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 property 语法将此 controller 传递给它们。 require 的完整形式如下：

require: '^?directiveName'

选项：

1. directiveName

   这个驼峰式名称指定控制器应该来自哪个指令。因此，如果我们的 <my-menuitem> 指令需要在其父 <my-menu> 上找到一个控制器，我们会将其写为 myMenu。

2. ^

   默认情况下，Angular 从同一元素上的命名指令获取控制器。添加这个可选的^ 符号表示还可以沿着 DOM 树查找指令。例如，我们需要添加这个符号；最后的字符串是^myMenu。

3. ?

   如果没有找到所需的控制器，Angular 会抛出一个异常来告诉你问题所在。在字符串中添加? 符号表示此控制器是可选的，如果未找到则不应抛出异常。虽然这听起来不太可能，但如果我们想让 <my-menu-item>s 在没有 <mymenu> 容器的情况下使用，我们可以将其添加到最终的要求字符串 ?^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);                
        };
    }
  };
});