require：'ngModel'是什么意思？

92

这是我的指令的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!

angularjs

— 生锈的
source

无论您在哪里使用此指令，都应将属性定义为ng-model='property'

— Chandermani 2014年

3

我可以改用data-ng-model吗？也是为什么有时我会看到：“ require：'？ngModel'，”这很令人困惑。

117

该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 vs ng-model：，data-ng-model虽然Angular支持在DOM上使用多种形式，但是当您通过名称引用指令时（例如，在创建指令或使用时require），则始终使用LowerCamelCase名称的形式。

— 米歇尔·提里（Michelle Tilley）
source

2

是否require: 'ngModel'应使用特定的原因ngModel: '='？

— ErikAGriffin

33

如创建自定义指令文档中所述：（首先是您在注释中的问题）

我可以data-ng-model代替吗？

答案：

最佳实践：尽量使用短划线分隔的格式（例如ng-bind对于ngBind）。如果你要使用HTML验证工具，可以改用data-prefixed版本（例如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',

使用指令时，它会强制将其与attribute / controller一起使用ng-model。

该`require`设置

（摘自Brad Green和Shyam Seshadri 的《 AngularJS 》一书）

其他指令可以使用require属性语法将此控制器传递给它们。完整形式的require看起来像：
require: '^?directiveName'
选项：

directiveName

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

^

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

?

如果找不到所需的控制器，Angular将引发异常以告知您有关该问题的信息。?在字符串中添加符号表示此控制器是可选的，并且如果找不到则不应引发异常。尽管听起来不太可能，但是如果我们希望在<my-menu-item>没有<mymenu>容器的情况下使用s ，我们可以将其添加为最终要求的字符串?^myMenu。

— 拉迪姆·科勒
source

21

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

从本质上讲，这是将ngModel传递给链接/编译函数而不是使用scope选项传递的最简单方法。访问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);                
        };
    }
  };
});

— 编码器
source

require：'ngModel'是什么意思？

该require设置

该`require`设置