Page 111 - AngularJS权威教程

10.5 ngModel 91

angular.module('myApp') 1
.directive('myDirective',function(){
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) { 2
if (!ngModel) return;
// 现在我们的指令中已经有ngModelController的一个实例
} 3
};
});
4
如果不设置require选项，ngModelController就不会被注入到指令中。
5
注意，这个指令没有隔离作用域。如果给这个指令设置隔离作用域，将导致内部ngModel无
法更新外部ngModel的对应值：AngularJS会在本地作用域以外查询值。
6
为了设置作用域中的视图值，需要调用ngModel.$setViewValue()函数。ngModel.$set
ViewValue()函数可以接受一个参数。
7
value（字符串）：value参数是我们想要赋值给ngModel实例的实际值。这个方法会更新控
制器上本地的$viewValue，然后将值传递给每一个$parser函数（包括验证器）。
8
当值被解析，且$parser流水线中所有的函数都调用完成后，值会被赋给$modelValue属性，
并且传递给指令中ng-model属性提供的表达式。
9
最后，所有步骤都完成后，$viewChangeListeners中所有的监听器都会被调用。
注意，单独调用$setViewValue()不会唤起一个新的digest循环，因此如果想更新指令，需要
在设置$viewValue后手动触发digest。 10

$setViewValue()方法适合于在自定义指令中监听自定义事件（比如使用具有回调函数的 11
jQuery插件），我们会希望在回调时设置$viewValue并执行digest循环。
angular.module('myApp') 12
.directive('myDirective', function() {
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) { 13
if (!ngModel) return;

$(function() { 14
ele.datepicker({
onSelect: function(date) {
// 设置视图和调用apply
scope.$apply(function() { 15
ngModel.$setViewValue(date);
});
} 16
});
});
}
}; 17
});
18