动态添加angularjs指令

我试图编写一个指令，将另一种类型的指令动态添加到DOM中并编译它们。它在使用字符串模板时似乎有效，但在使用templateUrl时失败。以下是工作模板字符串的JSFIDLE：

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

app.directive（'clicker'，函数（$compile）{
"严格使用",；
返回{
编译：函数（远程通讯、tAttrs）{
var t='Pop'；
返回函数（范围、元素）{
iElement.click（函数（）{
$（'body'）。追加（$compile（t）（scope））；
});
};
}
}
});
app.directive（'pop'，function（）{
"严格使用",；
返回{
模板：“测试模板”
//templateUrl:'partials/pop.html'
};
});

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

尝试添加其中两个将使DOM看起来像：

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

添加范围。$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
});

---

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

老实说，这似乎是一个bug。虽然，我真的想不出一个好的理由去做你想做的事。您试图实现的是使用ng repeat无法实现的哪些功能？我有一个用户列表，我正在使用ng repeat呈现该列表，但我想注册一个onclick处理程序来动态创建一个模式，该模式是我创建的指令（理想情况下使用templateUrl）。通过这种方式，模式从ng-repeat继承了用户的作用域。为什么不在页面上注册一个modal指令的实例，然后让重复项中的ng单击更改作用域以显示模式？为什么模态指令需要动态添加？希望能够堆叠多个模态。。。单击用户可能会打开“编辑用户”模式，但单击具有该模式的内容可能会打开另一个模式。为什么不创建一个指令，创建一个项数组，它是您的模式？而$apply只是它作为dom回调的结果。可以这样做。您好，请您提供一些关于我新提议的API的想法，以使以编程方式添加指令的过程更简单？谢谢