I am trying to conditionally build a template. I have a k2plugin directive with some divs and spans. According to the pluginui attribute, I want to insert another directive at the end of the template. My code following it interpolates everything except the plugins. For example, the last div results in:
<div {{pluginui}} width='300' height='420'></div>
{{pluginui}} is a literal, while it must interpolate to invoke another directive. It's funny if I put {{pluginui}} in another place on the same line (for example, between tags, it gets interpolation.
How am I wrong?
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", function () { return { restrict: "A", scope: true, link: function (scope, elements, attrs) { console.log ("creating canvas viewport"); }, template: "<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>", replace: true }; }); app.directive("divviewport", function () { return { restrict: "A", scope: true, link: function (scope, elements, attrs) { console.log ("creating div viewport"); }, template: "<div style=\"width='{{pluginwidth}}' height='{{pluginheight}}'\"></div>", replace: true }; }); app.directive("autoviewport", function () { return { restrict: "A", scope: true, link: function (scope, elements, attrs) { console.log ("creating auto viewport"); }, template: "<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>", replace: true }; });