2

我正在尝试编写一个指令，将另一种类型的指令动态添加到 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>
4

1 回答 1

2

添加 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
});

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

于 2013-01-19T22:56:56.320 回答