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，编译它，应用范围并用转换后的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>

我在指令中获得的范围是实际处理属性数组的父控制器的范围。问题是，如果属性列表预先填充了一些数据，那么最终会在编译的HTML中生成 - 酷。但是，对财产的任何改变实际上都没有。我在指令中的属性上添加了监视处理程序，实际上，只要对属性进行任何更改就会触发，但是，ng-repeat不会选择它。最初的想法是在开头将属性列表清空 - 这导致ng-repeat编译只有这个输出：

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

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

我错过了一些明显的东西吗？我已经阅读了关于$ compile和ng-repeat的文档，我想说我不需要自己操作DOM，ng-repeat应该完成它的工作。或者我完全错了？

感谢。

编辑：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返回一个函数，然后用你要附加元素的作用域调用（据我所知）。因此，您根本不需要存储对元素的引用，除非您想稍后使用它。

AngularJS：ng-repeat没有检测到范围的变化

1 个答案: