需求是什么意思:'ngModel'?

这是我的指令的HTML:

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

在我的指令中,我有这个:

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

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

我很困惑,因为当我将其更改为数据模式时,我收到了Angular的一条消息

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

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

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

 <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控制器来获取并设置colorPicker的颜色值。 看到这个JSFiddle的例子: http : //jsfiddle.net/BinaryMuse/AnMhx/

如果你使用require: 'ngModel' ,你可能不应该在你的隔离范围内使用ngModel: '=' ; ngModelController为您提供了更改值所需的所有访问权限。

AngularJS主页上的底部示例也使用了这个function(除了使用自定义控制器,不使用ngModel )。


至于指令的shell,例如, ngModel vs ng-model vs data-ng-model :而Angular支持在DOM上使用多个表单,当您通过名称引用指令时(例如,创build指令时,或使用require ),则始终使用名称的lowerCamelCaseforms。

正如“ 创build自定义指令”文档中所述:( 首先在注释中提到您的问题)

我可以有一个data-ng-model呢?

答案:

最佳实践 :首选使用以短划线分隔的格式(例如ngBind ng-bind )。 如果你想使用HTMLvalidation工具,你可以使用data前缀版本(例如ngBind的data-ng-bind )。 上面显示的其他forms是由于遗留原因而被接受的,但我们build议您避免这些forms。

例子:

 <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的完整forms如下所示:

 require: '^?directiveName' 

选项:

  1. directiveName

    这个驼峰名称指定了控制器应来自哪个指令。 所以如果我们的<my-menuitem>指令需要在它的父级<my-menu>上find一个控制器,我们会把它写成myMenu。

  2. ^

    默认情况下,Angular从同一个元素的命名指令中获取控制器。 添加这个可选的^符号表示也走了DOM树find指令。 例如,我们需要添加这个符号; 最后的string是^myMenu

  3. ?

    如果没有find需要的控制器,Angular会抛出一个exception来告诉你这个问题。 添加一个? 符号的string说,这个控制器是可选的,如果没有发现exception不应该被抛出。 虽然听起来不太可能,但是如果我们希望在没有<mymenu>容器的情况下使用<my-menu-item> ,我们可以添加最后一个需要的string?^myMenu

require:'ngModel'并且require:'^ngModel'允许您注入附加到指令所绑定到的元素或其父元素的模型。

它基本上是一个最简单的方法来将ngModel传递给链接/编译函数,而不是使用范围选项传递它。 一旦你有了访问ngModel,你可以使用$setViewValue来改变它的值,使用$setViewValue来使它变脏/干净,应用监视器等。

下面是一个简单的例子,通过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); }; } }; });