我正试图有条件地建立一个模板.我得到了一个带有一些div和spans的k2plugin指令.根据pluginui属性,我想在模板的末尾插入另一个指令.接下来是我的代码,插入除pluginui之外的所有内容
例如,最后一个div导致：
例如,最后一个div导致：
<div {{pluginui}} width='300' height='420'></div>
{{pluginui}}是文字的,而它应该插值以触发另一个指令.
有趣的是,如果我将{{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.
