需求是什么意思:'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'
选项:
directiveName
这个驼峰名称指定了控制器应来自哪个指令。 所以如果我们的
<my-menuitem>
指令需要在它的父级<my-menu>
上find一个控制器,我们会把它写成myMenu。
^
默认情况下,Angular从同一个元素的命名指令中获取控制器。 添加这个可选的
^
符号表示也走了DOM树find指令。 例如,我们需要添加这个符号; 最后的string是^myMenu
。
?
如果没有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); }; } }; });