Question

我在数组中有一个list指令选择器我需要在运行时在页面中动态填充它们如何继续我使用angularjs 1.5.8

Answer 1

你应该使用$ compile服务来做到这一点。例如，您有以下指令数组：

var myDirectives = [
     "<my-app-directive-one></my-app-directive-one>",
     "<my-app-directive-two></my-app-directive-two>",
     "<my-app-directive-three></my-app-directive-three>"
];

然后你可以单独或循环编译它们并插入你的html：

TestDirective.$inject = ["$compile"];
function TestDirective($compile) {
    return {
        restrict: "E",
        link: link
    };

    function link(scope, element) {
        element.append($compile(myDirectives[0])(scope));
    }
}

我使用了父指令的范围（用作指令沙箱），但是您可以为它创建子范围（范围。$ new（））或隔离范围（范围。$ new（false））。

如果您的数组看起来像这样：

var myDirectives = ["my-app-directive-one", "my-app-directive-two"];

然后您可以简单地进行以下转换：

myDirectives = myDirectives.map(
    function(directive) {
        return "<" + directive + "></" + directive + ">";
    }
);

更简单的解决方案

如果您可以在运行时之前将所有指令放在同一页面上，则可以使用ng-if而不是ng-show。它将解决您的性能问题，因为ng-if在销毁指令时会删除所有观察者。

是否可以动态填充页面中的指令

1 个答案: