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指令的控制器{{ 3}}

可以编写指令控制器以提供其他指令可以使用的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示例：which is an ngModelController

如果您使用的是require: 'ngModel'，则您可能不应在隔离范围内使用ngModel: '='; ngModelController为您提供更改值所需的所有权限。

http://jsfiddle.net/BinaryMuse/AnMhx/上的底部示例也使用此功能（除了使用自定义控制器，而不是ngModel）。

对于指令的大小写，例如，ngModel vs ng-model vs data-ng-model：当Angular支持在DOM上使用多个表单时，当您按名称引用指令时（例如，在创建指令或使用require时），您始终使用名称的lowerCamelCase形式。

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属性语法将控制器传递给它们。完整形式的需求如下：
require: '^?directiveName'
选项：



directiveName

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



^

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



?

如果找不到所需的控制器，Angular将抛出异常来告诉您该问题。向字符串添加?符号表示此控制器是可选的，如果未找到则不应抛出异常。虽然听起来不太可能，但如果我们想让<my-menu-item>在没有<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);                
        };
    }
  };
});

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

3 个答案:

`require`设置

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

3 个答案:

require设置

`require`设置