Angularjs ng在编译html后重复不加载数据

我有一个指令，它复制了一些html，其中包括一个控制器和一个ng repeat。我编译html并将其粘贴到dom中。我可以看到，新的html正在获取新编译的控制器的作用域，但是如果数据是异步加载的，ng repeat将不起作用

我创造了一个plunker，它显示了我的问题

index.html

<div class="parent-div">
    <div class="put-compiled-data-in-here" compile-html>
        <!-- copied html goes in here -->
    </div>
    <div ng-controller="CopiedController" class="copy blue">
        <h1>{{name}}</h1>
        <div ng-repeat="p in projects">
            <h1>{{p.name}}</h1>
        </div>
    </div>
</div>

复制和编译html的指令

app.directive('compileHtml', function ($compile, $rootScope, $parse) {
    return {
        restrict: 'A',
        link: function (scope, ele, attrs) {
            var html = jQuery('.copy').clone().removeClass('.blue').addClass('.pink');
            var el = angular.element(html);
            ele.append(el);
            $compile(ele.contents())(scope);
        }
     };
});

慢速服务（又称ajax）：

---

非常感谢您的帮助。

您可能应该从removeClass和addClass运算符中删除“.”

var html = jQuery('.copy').clone().removeClass('blue').addClass('pink');

检查

    http://plnkr.co/edit/l7o5EFC3863ZI4cxvuos?p=preview

更改以下内容

    <div ng-controller="CopiedController" class="put-compiled-data-in-here" compile-html>




    app.directive('compileHtml', function($compile, $rootScope, $parse) {
        return {
            template: $('.copy').html(),
            restrict: 'A',
            link: function(scope, ele, attrs) {
                // var html = jQuery('.copy').clone().removeClass('.blue').addClass('.pink');
                // var el = angular.element(html);
                // ele.append(el);
                // $compile(ele.contents())(scope);
                ele.removeClass('blue').addClass('pink');
            }
        };
    });

app.directive（'compileHtml'，function（$compile、$rootScope、$parse）{
返回{
模板：$（'.copy'）.html（），
限制：“A”，
链接：功能（范围、元素、属性）{
//var html=jQuery（'.copy'）.clone（）.removeClass（'.blue'）.addClass（'.pink'）；
//var el=angular.element（html）；
//ele.追加（el）；
//$compile（ele.contents（））（范围）；
ele.removeClass（'blue'）.addClass（'pink'）；
}
};
});

您真的希望复制的部分再次加载数据吗？看起来您正在尝试这样做？还是只想在页面中的两个不同位置显示相同的数据？如果是后者，那么您应该将数据放在范围内，以便两个对象都可以看到它。也许使用共享服务。在克隆上操作类有什么意义。。。。然后只使用它的内部html？使用

ng类

此操作有效，谢谢。你能解释一下为什么这样做有效，而我的尝试没有成功，因为我认为在链接阶段编译也会做同样的事情。这不是链接阶段编译不起作用。只是当您获得$（'.copy'）时，您获得的jQuery对象不是呈现的对象。

    http://plnkr.co/edit/l7o5EFC3863ZI4cxvuos?p=preview

    <div ng-controller="CopiedController" class="put-compiled-data-in-here" compile-html>




    app.directive('compileHtml', function($compile, $rootScope, $parse) {
        return {
            template: $('.copy').html(),
            restrict: 'A',
            link: function(scope, ele, attrs) {
                // var html = jQuery('.copy').clone().removeClass('.blue').addClass('.pink');
                // var el = angular.element(html);
                // ele.append(el);
                // $compile(ele.contents())(scope);
                ele.removeClass('blue').addClass('pink');
            }
        };
    });