angularjs – 使用编译VS模板函数进行角度动态模板化？
|
我已经知道每个项目的目的是什么：编译与链接(前/后)与控制器
所以,假设我有这个简单的代码： HTML <body ng-controller="mainController">
{{ message }}
<div otc-dynamic=""></div>
</body>
调节器 app.controller("mainController",function($scope) {
$scope.label = "Please click";
$scope.doSomething = function() {
$scope.message = "Clicked!";
};
});
指示 app.directive("otcDynamic",function($compile) {
var template = "<button ng-click='doSomething()'>{{label}}</button>";
return {
compile: function(tElement,tAttributes) {
angular.element(tElement).append(template);
for (var i = 0; i < 3; i++) {
angular.element(tElement).append("<br>Repeat " + i + " of {{name}}");
}
return function postLink(scope,element,attrs) {
scope.name = "John";
}
}
}
});
我们可以看到,我修改了模板(在编译函数 – 它应该是实际的位置) 结果(plnker)：
但 我不知道那个模板：…也可以采取一个功能. 所以我可以改用模板函数(plunker)： app.directive("otcDynamic",function() {
var template1 = "<button ng-click='doSomething()'>{{label}}</button>";
return {
template: function(element,attr) {
element.append(template1);
for (var i = 0; i < 3; i++)
element.append("<br>Repeat " + i + " of {{name}}");
},link: function(scope,element) {
scope.name = "John";
}
}
});
题 如果是这样 – 我什么时候应该使用模板函数vs编译函数？ 解决方法
让我试着解释一下到目前为止我所理解的内容.
Directives是一种在Angular中使用DOM的机制.它使您可以利用DOM元素及其属性.因此,它还为您提供回调,使您的工作轻松. A)模板 就像它说的那样,它是一堆HTML标签或文件直接在DOM上表示它作为你的指令的面. B)编译 编译是指令中的一种机制,它编译模板HTML或DOM以对其执行某些操作并返回最终的HTML集作为模板.像Angular DOC中给出的那样
这清楚地表明,这是模板之上的东西.就像我上面说过的那样,你也可以在模板中实现类似的操作,但是当我们有方法用于其唯一目的时,你应该为了最佳实践而使用它们. C)链接 Link用于注册监听器,如$watch,$apply等,以将您的模板与Angular范围链接,以便它与模块绑定.当您在控制器中放置任何指令时,范围流将通过链接,这意味着可以在链接中直接访问范围.范围是角度应用程序的唯一,因此它为您提供了使用实际模型的优势.链接在dom操作中也很有用,可以用于使用jQlite处理任何DOM元素 所以收集以上所有内容 1.模板是指向DOM或HTML的主要来源.它可以是文件或内联HTML. 2.编译是将HTML编译成最终模板的包装器.它用于收集所有HTML元素和属性以创建指令模板. 3. Link是各种范围和观察者的监听器包装器.它将当前控制器的范围与模板的html绑定,并且还围绕它进行操作. 希望这有助于理解.谢谢 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
