Angularjs:理解递归指令
Angularjs: understanding a recursive directive
我在这里发现了一个很棒的树指令。原文:http://jsfiddle.net/n8dPm/
我一直试图通过其他几个 SO 问题来了解它的功能,1,2 .我不太明白渲染树指令的递归调用是如何工作的。主要是编译函数
- 什么时候调用了所有的编译函数?
- $compile函数何时缓存在变量
compiledContents
中(这是链接函数吗?(,何时追加?为什么它不总是附加?
--
compile: function(tElement, tAttr) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
},
Ng 网站有一些很棒的文档(在我看来是最好的(。 启动和运行时循环的概述非常有用:http://docs.angularjs.org/guide/concepts
在高层次上,当 Ng 第一次启动时,它会从 ng-app 所在的位置开始编译 DOM(就像 Ng 的另一个指令一样(。 这意味着它遍历元素并查看链接到$rootScope(编译/链接过程设置的原型继承链的一部分的所有范围的根(所需的指令和表达式。 如果它是一个指令,编译过程也会在其上完成。 编译过程获取它在 HTML 中找到的所有 Ng 指令,并根据分配的优先级或假设优先级为零来确定它们的优先级。 当它们都排序时,它会执行返回链接函数的指令的编译函数。 在上面的例子中,有两个显示链接函数,我将在下面注释它们,以及将其链接到此解释的其他注释。 链接函数还以 transclude 对象的形式为该指令作为属性、类或元素的元素中的 HTML 提供 HTML。
执行链接函数,该函数链接范围和指令以及生成视图。 这可能包括 HTML/transclude,因此可以在指令 ng-transclude 位于指令模板中的位置添加它(它将应用相同的过程,其模板是 transclude(。
因此,以下是我对上面略微更正的自定义指令的注释:
module.directive("tree", function($compile) {
//Here is the Directive Definition Object being returned
//which is one of the two options for creating a custom directive
//http://docs.angularjs.org/guide/directive
return {
restrict: "E",
//We are stating here the HTML in the element the directive is applied to is going to be given to
//the template with a ng-transclude directive to be compiled when processing the directive
transclude: true,
scope: {family: '='},
template:
'<ul>' +
//Here we have one of the ng-transclude directives that will be give the HTML in the
//element the directive is applied to
'<li ng-transclude></li>' +
'<li ng-repeat="child in family.children">' +
//Here is another ng-transclude directive which will be given the same transclude HTML as
//above instance
//Notice that there is also another directive, 'tree', which is same type of directive this
//template belongs to. So the directive in the template will handle the ng-transclude
//applied to the div as the transclude for the recursive compile call to the tree
//directive. The recursion will end when the ng-repeat above has no children to
//walkthrough. In other words, when we hit a leaf.
'<tree family="child"><div ng-transclude></div></tree>' +
'</li>' +
'</ul>',
compile: function(tElement, tAttr, transclude) {
//We are removing the contents/innerHTML from the element we are going to be applying the
//directive to and saving it to adding it below to the $compile call as the template
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
//Get the link function with the contents frome top level template with
//the transclude
compiledContents = $compile(contents, transclude);
}
//Call the link function to link the given scope and
//a Clone Attach Function, http://docs.angularjs.org/api/ng.$compile :
// "Calling the linking function returns the element of the template.
// It is either the original element passed in,
// or the clone of the element if the cloneAttachFn is provided."
compiledContents(scope, function(clone, scope) {
//Appending the cloned template to the instance element, "iElement",
//on which the directive is to used.
iElement.append(clone);
});
};
}
};
});
整个工作:http://jsfiddle.net/DsvX6/7/
- 数组在递归方法中设置为null
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 递归使用 eval() 是检查程序执行的好方法吗?
- 使用递归、Ramda.js和无点样式重构字符串的getPermutations()
- 在嵌套递归指令中将参数传递给父控制器方法
- 如何在递归指令中访问父级
- Angularjs:select中的递归指令
- 递归嵌套 angularjs 指令
- Angularjs:理解递归指令
- 下拉子菜单和角度指令中的递归
- 递归自定义树视图 angularjs 指令调用 ng 单击两次
- 指令的递归调用导致浏览器选项卡崩溃
- 如何修复ng-click-dons'不能在递归指令模板中工作
- 具有ng重复的嵌套递归指令
- 点击时递归添加新的指令实例
- 在angularjs中递归嵌套指令
- 如何在angularjs的递归指令中使用全局函数
- Angular1.3:递归指令模板中的访问控制器函数
- Angular指令中的递归
- (为什么)有一个“自称”的指令在一个有限的n -repeat导致一个堆栈溢出从无限递归