指令不插值，在模板字符串中 [英] directive not interpolating, in a template string

问题描述

我正在尝试有条件地构建模板.我得到了一个带有一些 div 和 span 的 k2plugin 指令.根据 pluginui 属性，我想在模板的末尾插入另一个指令.接下来的代码插入了除 pluginui 之外的所有内容例如，最后一个 div 结果为:

{{pluginui}} 是文字，而它应该插入以触发另一个指令.有趣的是，如果我将 {{pluginui}} 放在同一行的其他地方(例如在标签之间，它会被插入.

我做错了什么?

app.directive("k2plugin", function () {返回 {限制:A"，范围:真实，链接:函数(范围、元素、属性){console.log ("创建插件");//这不会立即起作用.一旦调用，属性 pluginname 将被取消定义.scope.pluginname = "加载中...";scope.pluginid = null;//观察内插属性的变化//[...] 观察名称、id、宽度、高度attrs.$observe('pluginui', function(value) {console.log('pluginui has changed value to ' + value);scope.pluginui = attrs.pluginui + "viewport";});},模板:
\
\<span>{{pluginname}}</span>\<span ng-click=\"resize(pluginid)\">_</span><span ng-click=\"remove(pluginid)\">X</span>\</div>\<div {{pluginui}} width='{{pluginwidth}}' height='{{pluginheight}}'></div>\
",替换:真的，};});app.directive("canvasviewport", function () {返回 {限制:A"，范围:真实，链接:函数(范围、元素、属性){console.log ("创建画布视口");},模板:<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>",替换:真};});app.directive("divviewport", function () {返回 {限制:A"，范围:真实，链接:函数(范围、元素、属性){console.log ("创建 div 视口");},模板:"<div style=\"width='{{pluginwidth}}' height='{{pluginheight}}'\"></div>",替换:真};});app.directive("autoviewport", function () {返回 {限制:A"，范围:真实，链接:函数(范围、元素、属性){console.log ("创建自动视口");},模板:<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>",替换:真};});

解决方案

我认为 Angular 不会将某些内容插入到指令名称中.{{}}s(自动)设置 $watch.当 $watch 注意到变化时，它会更新视图，但它不会调用 $compile，这是我认为这里需要发生的事情.

所以，我会尝试在指令的链接函数中生成 HTML/模板，然后 $compile 它.类似的东西:

scope.$watch('pluginui', function(newValue) {var jqLit​​eWrappedElement = angular.element('<div' + newValue + 'width=...');element.replaceWith(jqLit​​eWrappedElement);$compile(jqLit​​eWrappedElement)(范围);})

记得在指令中注入$compile.

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屋！