angularjs – 指令不插值,在模板字符串中
发布时间:2020-12-17 07:36:10 所属栏目:安全 来源:网络整理
导读:我正试图有条件地建立一个模板.我得到了一个带有一些div和spans的k2plugin指令.根据pluginui属性,我想在模板的末尾插入另一个指令.接下来是我的代码,插入除pluginui之外的所有内容 例如,最后一个div导致: div {{pluginui}} width='300' height='420'/div {{
我正试图有条件地建立一个模板.我得到了一个带有一些div和spans的k2plugin指令.根据pluginui属性,我想在模板的末尾插入另一个指令.接下来是我的代码,插入除pluginui之外的所有内容
例如,最后一个div导致: <div {{pluginui}} width='300' height='420'></div> {{pluginui}}是文字的,而它应该插值以触发另一个指令. 我错了什么? app.directive("k2plugin",function () { return { restrict: "A",scope: true,link: function (scope,elements,attrs) { console.log ("creating plugin"); // this won't work immediatley. attribute pluginname will be undefined as soon as this is called. scope.pluginname = "Loading..."; scope.pluginid = null; // observe changes to interpolated attributes // [...] observe name,id,width,height attrs.$observe('pluginui',function(value) { console.log('pluginui has changed value to ' + value); scope.pluginui = attrs.pluginui + "viewport"; }); },template: "<div> <div> <span>{{pluginname}}</span> <span ng-click="resize(pluginid)">_</span> <span ng-click="remove(pluginid)">X</span> </div> <div {{pluginui}} width='{{pluginwidth}}' height='{{pluginheight}}'></div> </div>",replace: true,}; }); app.directive("canvasviewport",attrs) { console.log ("creating canvas viewport"); },template: "<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>",replace: true }; }); app.directive("divviewport",attrs) { console.log ("creating div viewport"); },template: "<div style="width='{{pluginwidth}}' height='{{pluginheight}}'"></div>",replace: true }; }); app.directive("autoviewport",attrs) { console.log ("creating auto viewport"); },replace: true }; });
我不认为Angular会将某些内容插入到指令名称中. {{}} s(自动)设置$watch.当$watch注意到更改时,它会更新视图,但它不会调用$compile,这是我认为需要在这里发生的.
所以,我会尝试在指令的链接函数中生成HTML /模板,然后$编译它.就像是: scope.$watch('pluginui',function(newValue) { var jqLiteWrappedElement = angular.element('<div ' + newValue + ' width=...'); element.replaceWith(jqLiteWrappedElement); $compile(jqLiteWrappedElement)(scope); }) 记得在命令中注入$compile. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |