AngularJS：ng-repeat不会检测到范围的变化

Question

我一直在阅读各种帖子、问题、答案和文档，但到目前为止还没有解决我的问题。

我正在使用mbExtruder jQuery插件，为了将其集成到angular中，我为它创建了一个指令：

directive('mbExtruder', function($compile) {
            return {
                restrict : 'A',
                link : function(scope, element, attrs) {
                    var mbExtruderConfigurationAttrs = scope.$eval(attrs.mbExtruder);
                    mbExtruderConfigurationAttrs.onExtContentLoad = function() {
                        var templateElement = angular.element(angular.element(element.children()[0]).children()[0]);
                        var clonedElement = $compile(templateElement)(scope);                       
                        scope.$apply();
                        var contentElement = angular.element(angular.element(angular.element(element.children()[0]).children()[0]).children()[0]);
                        contentElement.replaceWith(clonedElement.html());
                    };
                    element.buildMbExtruder(mbExtruderConfigurationAttrs);
                    $.fn.changeLabel = function(text) {
                        $(this).find(".flapLabel").html(text);
                        $(this).find(".flapLabel").mbFlipText();
                    };

我正在提取容器div，编译它，应用scope并用转换后的div替换原来的div。

现在，我使用mbExtruder的功能从单独的HTML文件加载内容，如下所示：

<div>
<ul>    
    <li ng-repeat="property in properties">
        <span><img ng-src="../app/img/{{property.attributes['leadimage']}}"/></span>
        <a ng-click="openDetails(property)">{{property.attributtes['summary']}}</a>
    </li>
    <div ng-hide="properties.length">No data</div>
</ul>
</div>

在视图的HTML中，我有以下内容：

<div id="extruderRight"
        mb-extruder="{position: 'right', width: 300, positionFixed: false, extruderOpacity: .8, textOrientation: 'tb'}"
        class="{title:'Lista', url:'partials/listGrid.html'}">
    </div>

我在指令中得到的范围是实际处理属性数组的父控制器的范围。问题是，如果属性列表预先填充了一些数据，那么最终会以编译后的超文本标记语言结束-酷。但是，对属性的任何更改实际上都没有任何作用。我在指令中的属性上添加了监视处理程序，实际上，每当对属性进行任何更改时都会触发该处理程序，但是，ng-重复不会选择它。最初的想法是让属性列表在开始时为空——这导致ng-重复编译只有这个输出：

<!-- ngRepeat: property in properties -->

这样做有问题吗？ng-repeat声明事实上已经从DOM中消失了。

我是不是遗漏了一些明显的东西？我已经阅读了$编译和ng重复的留档，我会说我不需要自己操作DOM，ng重复应该做它的工作。还是我完全错了？

谢谢

编辑：Plunker

Answer 1

你要进来了

contentElement.replaceWith(clonedElement.html());

请注意，您实际上是用原始HTML字符串代码替换它。因此，Angular对代码中的指令没有概念。然而，我完全不明白为什么需要这样做。只需编译并将结果附加到范围中似乎就可以了：

var templateElement = angular.element(angular.element(element.children()[0]).children()[0]);
$compile(templateElement)(scope);

这是更新的工作版本：

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

$compile的文档没有说太多，但是$compile返回了一个函数，然后你用你想要附加元素的作用域来调用它(就我所理解的而言)。因此，您根本不需要存储对该元素的引用，除非您以后想要使用它。