angularjs - 动态添加 angularjs 指令

Question

我正在尝试编写一个指令，将另一种类型的指令动态添加到 DOM 并编译它们。使用字符串模板时它似乎可以工作，但使用 templateUrl 时会失败。这是工作模板字符串的 jsfiddle:

app.directive('clicker', function($compile) {
    'use strict';

    return {
        compile: function(tElement, tAttrs) {
            var t = '<div data-pop>Pop</div>';

            return function(scope, iElement) {
                iElement.click(function() {
                    $('body').append($compile(t)(scope));
                });
            };
        }
    }
});

app.directive('pop', function() {
    'use strict';

    return {
        template: '<div>Testing template</div>'
        //templateUrl: 'partials/pop.html'
    };
});

http://jsfiddle.net/89AYX/

但是，如果交换到 templateUrl(使用包含模板字符串中确切内容的 html 文件)，它只会工作一次。它确实向 DOM 添加了一个元素，但它不包含 templateUrl 内容，也不调用动态添加指令中的链接函数...

尝试添加其中两个将使 DOM 看起来像这样:

<div data-pop><!-- content of pop.html --></div>
<div data-pop></div>
<div data-pop></div>

Answer 1

添加scope.$apply()对我有用。使用 jQuery 1.9.0 和 Angular 1.0.3 进行测试。

iElement.bind('click', function() {
    $('body').append($compile(t)(scope));
    scope.$apply();  // cause a $digest cycle to run, since we're "outside" Angular
});

这个fiddle使用内联模板，但我还使用本地网络服务器进行了测试，该服务器必须执行单独的 HTTP GET 才能获取部分内容。