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));