AngularJS指令动态模板
发布时间:2020-12-17 09:02:02 所属栏目:安全 来源:网络整理
导读:对不起,也许这是一个愚蠢的问题,但我还在学习。 我试图使用基于范围值的不同模板的指令。 这是我做到目前为止,我不知道为什么不工作http://jsbin.com/mibeyotu/1/edit Html元素: data-type content-attr="test1"/data-type 指示: var app = angular.mod
对不起,也许这是一个愚蠢的问题,但我还在学习。
我试图使用基于范围值的不同模板的指令。 这是我做到目前为止,我不知道为什么不工作http://jsbin.com/mibeyotu/1/edit Html元素: <data-type content-attr="test1"></data-type> 指示: var app = angular.module('myApp',[]); app.directive('dataType',function ($compile) { var testTemplate1 = '<h1>Test1</h1>'; var testTemplate2 = '<h1>Test2</h1>'; var testTemplate3 = '<h1>Test3</h1>'; var getTemplate = function(contentType){ var template = ''; switch(contentType){ case 'test1': template = testTemplate1; break; case 'test2': template = testTemplate2; break; case 'test3': template = testTemplate3; break; } return template; }; var linker = function(scope,element,attrs){ element.html(getTemplate(scope.content)).show(); $compile(element.contents())(scope); }; return { restrict: "E",replace: true,link: linker,scope: { content:'=' } }; });
1)您在HTML中传递内容作为属性。尝试这个:
element.html(getTemplate(attrs.content)).show(); 代替: element.html(getTemplate(scope.content)).show(); 2)指令的数据部分正在编译,所以你应该使用别的东西。而不是数据类型,例如datan类型。 链接在这里: http://jsbin.com/mibeyotu/6/edit (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |