directive not interpolating, in a template string-Collection of common programming errors
I’m trying to conditionally build a template. I got 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, that follows, interpolates everything but pluginui For example, the last div results in:
{{pluginui}} is literal, while it should interpolate to trigger the other directive. Funny thing is, if I put {{pluginui}} elsewhere in the same line (for example between the tags, it gets interpolated.
What am I getting 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: "\
\
{{pluginname}}\
_ X\
\
\
",
replace: true,
};
});
app.directive("canvasviewport", function () {
return {
restrict: "A",
scope: true,
link: function (scope, elements, attrs) {
console.log ("creating canvas viewport");
},
template: "",
replace: true
};
});
app.directive("divviewport", function () {
return {
restrict: "A",
scope: true,
link: function (scope, elements, attrs) {
console.log ("creating div viewport");
},
template: "",
replace: true
};
});
app.directive("autoviewport", function () {
return {
restrict: "A",
scope: true,
link: function (scope, elements, attrs) {
console.log ("creating auto viewport");
},
template: "",
replace: true
};
});
-
I don’t think Angular will interpolate something into a directive name. {{}}s (automatically) set up a $watch. When the $watch notices a change, it will update the view, but it won’t call $compile, which is what I think needs to happen here.
So, I would try generating the HTML/template in the directive’s link function and then $compile it. Something like:
scope.$watch('pluginui', function(newValue) { var jqLiteWrappedElement = angular.element('
Originally posted 2013-12-02 01:31:20.