我需要对范围和模板执行一些操作。似乎我可以在link函数或controller函数中做到这一点(因为两者都可以访问范围)。
link
controller
什么时候我必须使用link功能而不是控制器?
angular.module('myApp').directive('abc', function($timeout) { return { restrict: 'EA', replace: true, transclude: true, scope: true, link: function(scope, elem, attr) { /* link function */ }, controller: function($scope, $element) { /* controller function */ } }; }
另外,我知道那link是无角度的世界。所以,我可以使用$watch,$digest和$apply。
$watch
$digest
$apply
link当我们已经有了控制器时,该功能的意义是什么?
在我 最初link与and函数斗争controller并阅读了很多关于它们的内容之后,我想现在我有了答案。
首先让我们 了解 ,
简而言之,角度指令如何工作:
var templateString = '<div my-directive>{{5 + 10}}</div>';
templateString
var el = angular.element(templateString);
el
$compile
var l = $compile(el)
这是发生的事情,
* `$compile`遍历整个模板并收集它识别的所有指令。 * 发现的所有指令都被 **递归编译** 并收集它们的`link`功能。 * 然后,所有`link`函数都包装在一个新`link`函数中并以`l`.
scope
l
l(scope)
template
DOM
比较 编译 与 链接 与 控制器 :
每个指令只 编译 一次, 链接 函数被保留以供重复使用。因此,如果有适用于指令的所有实例的东西,应该在指令的compile函数内执行。
compile
现在,在编译之后,我们有了在将 模板* 附加到 DOMlink时执行的函数。因此,我们执行特定于指令每个实例的所有操作。例如: 附加事件 , 根据范围改变模板 等。 ***
最后,当指令在(连接后)工作时, 控制器 应该是可用的实时和反应性的。DOM所以:
(1) 用链接设置视图[ V* ](即模板)后。$scope是我们的 [ M ] 并且是我们在 MVC$controller中的 [ C ] *
$scope
$controller
(2)通过设置手表来利用与 $scope的* 2-way 绑定。 *
(3)$scope预计将在控制器中添加监视,因为这是在运行时监视模板的内容。
(4) 最后,controller也用于能够在相关指令之间进行通信。(myTabs例如https://docs.angularjs.org/guide/directive中的示例)
myTabs
(5) 的确,我们也可以在link函数中完成所有这些,但它是关于 关注点分离的 。
因此,最后我们有以下完美契合所有部分的内容: