Page 353 - AngularJS权威教程

23.8 何时使用$apply 333

一般不建议在控制器中使用$apply()，因为这样会导致难以测试，而且如果不得不 19
在控制器中使用$apply()或者$digest()，很可能让事情变得更加难以理解。

当我们将jQuery和Angular集成在一起时（这通常被视为一个肮脏的行为），就需要使用 20
$apply()，因为Angular不会察觉到执行在Angular上下文外部的事件。例如，在使用jQuery插件
时（比如datepicker），就需要使用$apply()将来自jQuery的值传递到Angular应用中。
21
在这里，我们构建了一个简单的指令（第10章深入探索了如何构建指令），指令中我们在元
素上使用了datepicker这个jQuery插件方法。
22
datepicker插件暴露了一个onSelect事件，这个事件会在用户选择日期时触发。为了在
Angular应用内部获取用户选择的日期，我们需要在$apply()函数内运行datepicker的回调函数。 23

ele.datepicker()函数是由jQuery datepicker插件提供的可用于DOM元素的属 24
性方法。要让它工作起来，需要确保在页面上引入了jQuery和jQuery datepicker
插件。
25

ctrl.$setViewValue()函数是在DOM元素上使用ng-model时提供的指令。更
多信息请参考第5章。 26

app.directive('myDatepicker', function() { 27
return function(scope, ele, attrs, ctrl) {
$(function() {
// 在元素上调用datepicker方法
ele.datepicker({ 28
dateFormat: 'mm/dd/yy',
onSelect: function(date) {
scope.$apply(function() { 29
ctrl.$setViewValue(date);
});
}
}); 30
});
}
}); 31

32

33

34

35

36