Question

我需要一个根据范围内的对象而更改的模板。因为它是一个对象而不是一个字符串，所以我不能使用模板函数，所以我使用链接函数将html添加到元素中。当然我的html现在需要明确$插值，所以这就是我最终的结果：

scope: {
    obj: "=ngModel",
    type: "<"
},
controllerAs: "display",
controller: function() {
    let display = this;
    // sets bunch of other functions, including booleanLabel and displayData
},
link: function(scope, element, attrs) {
    let display = scope;

    function template(type) {
        switch (type) {
            case ObjTypes.X:
                return `<button ng-click="display.toggleBoolean(display.obj)">
                          {{display.booleanLabel(display.obj.data)}}
                        </button>`;
            case ObjTypes.Y:
                return `<button>
                          {{display.displayData(display.obj.data)}}
                        </button>`;
            }
        }

        element.html($interpolate(template(display.type))(display));
    }

这不起作用。但这是奇怪的事情：当我用display.obj替换obj时，值就会通过。但需要使用display.function()调用函数。

我怀疑它与obj从外部放在示波器上这一事实有关，而控制器将这些功能放在了示波器上，但它令人难以置信的奇怪和令人困惑。更糟糕的是，ng-click不会触发。我使用display.toggle()还是toggle()无关紧要。但是display.booleanLabel（）和display.displayData（）工作正常，只要我传递obj，而不是display.obj。

这里发生了什么？如何让这更容易理解和维护？

我正在使用Angular 1.5，我使用controllerAs：'display'并让display = scope来确保我的范围在任何地方使用相同的名称。重点是让它更容易理解，但这显然不适用于此。

Answer 1

首先，您可以在模板中使用ng-if。

其次，模板可以是一个功能。

第三，如果添加新的html元素 - 通常需要$编译它。不确定你想要插补什么...

链接函数中添加的HTML不会绑定到范围

1 个答案: