javascript - angularjs - 动态更新页面上的所有指令后重新加载它们

Question

我在 html 页面中有一堆指令，假设指令是 <my-directive></my-directive> 。这些指令是在 AngularJS 之外添加或更改的，例如jQuery 函数将简单地append一个新的<my-directive></my-directive>到页面。

这是我的问题 - 附加新的 <my-directive></my-directive> 后，该指令实际上并不执行任何操作 - 它只是一个没有任何功能的标记。

如何强制 Angular 识别已添加新标签？我尝试过使用scope.apply，但没有任何运气。

谢谢!

Answer 1

我认为您正在寻找 Angulars $compile 方法:

myApp.directive('addonclick', function($compile){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){   
            var html = attrs.addonclick; //or something else     
            element.on("click", function(){
                $(element).append($compile(html)(scope));
            })
        };
    };
});

编辑:

首先尝试获取范围:

var scope = angular.element("yourElement").scope();

然后获取并调用编译服务:

var compile = angular.element("yourElement").injector().get("$compile"); //or
var compile = angular.injector(["moduleName"]).get("$compile");
$("yourElement").append(compile("<my-directive/>")(scope));