指令不插值，在一个模板字符串 [英] directive not interpolating, in a template string
问题描述
我试图有条件地建立一个模板。我买了一些div和跨越k2plugin指令。按照为PluginUi属性，我想在模板的末尾插入另一指令。我的code，后面，插一切，但为PluginUi
例如，在最后的div结果
＆LT;的div {{为PluginUi}}宽度='300'高度='420'＆GT;＆LT; / DIV＆GT;
{{为PluginUi}}是文字，而它应该内插来触发其他指令。
有趣的是，如果我把{{为PluginUi}}其他地方在同一直线上（例如标记之间，它被插。
我是什么让错了？
app.directive（k2plugin功能（）{
返回{
限制：A，
适用范围：真，
链接：功能（范围，元素，ATTRS）{
的console.log（创建插件）; //这是不行的immediatley。属性pluginname将尽快为这就是所谓的不确定。
scope.pluginname =载入中...
scope.pluginid = NULL; //观察更改属性插值 // [...]观察姓名，ID，宽度，高度 ATTRS。观察$（'为PluginUi'，功能（价值）{
的console.log（'为PluginUi改变值+值）;
scope.pluginui = attrs.pluginui +视
}）; }，
模板：＆LT; DIV＆GT; \\
＆LT; DIV＆GT; \\
＆LT;跨度＆GT; {{pluginname}}＆LT; / SPAN＆GT; \\
＆LT;跨度NG点击= \\调整（pluginid）\\＆GT; _＆LT; / SPAN＆GT; ＆LT;跨度NG点击= \\删除（pluginid）\\＆GT; X＆LT; / SPAN＆GT; \\
＆LT; / DIV＆GT; \\
＆LT;的div {{为PluginUi}}宽度='{{pluginwidth}}'高度='{{pluginheight}}'＆GT;＆LT; / DIV＆GT; \\
＆LT; / DIV＆gt;中，
更换：真实，
};
}）; app.directive（canvasviewport功能（）{
返回{
限制：A，
适用范围：真，
链接：功能（范围，元素，ATTRS）{
的console.log（创造帆布视）;
}，
模板：＆LT;画布宽度='{{pluginwidth}}'高度='{{pluginheight}}'＆GT;＆LT; /帆布＆gt;中，
替换：真
};
}）; app.directive（divviewport功能（）{
返回{
限制：A，
适用范围：真，
链接：功能（范围，元素，ATTRS）{
的console.log（创造DIV视）;
}，
模板：＆LT; DIV的风格= \\WIDTH ={{pluginwidth}}'高度='{{pluginheight}}'\\＆GT;＆LT; / DIV＆gt;中，
替换：真
};
}）; app.directive（autoviewport功能（）{
返回{
限制：A，
适用范围：真，
链接：功能（范围，元素，ATTRS）{
的console.log（创建自动视口）;
}，
模板：＆LT;画布宽度='{{pluginwidth}}'高度='{{pluginheight}}'＆GT;＆LT; /帆布＆gt;中，
替换：真
};
}）;
我不认为将角插东西放到一个指令名称。 {{}}秒（自动）设置一个$手表。当$手表注意到一个变化，它将更新的观点，但它不会调用$编译，这是我认为需要在这里发生。
所以，我会尝试在生成指令的链接功能的HTML /模板，然后$编译。是这样的：
范围。$腕表（'为PluginUi'，函数（newValue）以{
VAR jqLiteWrappedElement = angular.element（'＆LT; DIV'+ +为newValueWIDTH = ...'）;
element.replaceWith（jqLiteWrappedElement）;
$编译（jqLiteWrappedElement）（范围）;
}）
记住注入 $编译进入指令。
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:
<div {{pluginui}} width='300' height='420'></div>
{{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: "<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
};
});
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('<div ' + newValue + ' width=...');
element.replaceWith(jqLiteWrappedElement);
$compile(jqLiteWrappedElement)(scope);
})
Remember to inject $compile into the directive.
这篇关于指令不插值，在一个模板字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
