Javascript $compile-breaks-ng-repeat

因此，我试图循环一个由

ng repeat

生成的元素列表，用指令标记它们（在本例中为

ng show

），然后使用$compile重新编译。我遇到的问题是$compile破坏了

ng repeat

指令，并且只有repeat的注释得到输出。我错过了什么

编辑：如果在运行

$compile

之前删除

ng repeat

指令，则此操作有效。这是正确的方法还是我仍然遗漏了什么

我的指示：

.directive("imageSlider", [ '$timeout', '$compile', '$rootScope', function($timeout, $compile, $rootScope) {
    return function(scope, element, attrs)
    {
        // Remove image slider attribute from element to prevent infinite loop
        element.removeAttr("image-slider");

        // Set the current slide
        scope.currentSlide = 0;

        // Wait for all other first-round directives to finish
        $rootScope.$on("initialised", function(){
            // Get the slides
            var slides = $("[slide]");

            // Loop over all the slides
            for (var i=0, j=slides.length; i<j; i++) {
                $(slides[i]).attr("ng-show", "currentSlide == " + i);
            };

            // Re-compile the template with the new ng-show attributes
            $compile(element)(scope);
        });
    }
}])

---

需要注意的是：$watch将与每个$digest循环一起运行，设置一个超时，它将广播一个“初始化的”，这将重新编译您的内容。因此，基本上，在每次摘要循环150毫秒后，您将重新编译DOM。我不确定你的意图是什么？手表在每次摘要后都会自动复位，所以它基本上是在最后一次摘要初始化后150毫秒。这是测试和确认，只有火灾一次。

<div class="image-slider" image-slider>
    <div class="slider-items">
        <a class="slider-item" ng-repeat="slide in page.slides" href="{{slide.link}}" slide>
            <div class="image-container">
                <img ng-src="{{slide.image}}" alt="{{slide.title}}">
            </div>
            <div class="excerpt">
                <h1>{{slide.title}}</h1>
                <h2>{{slide.excerpt}}</h2>
                <p class="cta">Learn More &rsaquo;</p>
            </div>
        </a>
    </div>
</div>

<div class="image-slider ng-scope">
    <div class="slider-items">
        <!-- ngRepeat: slide in page.slides --><!-- ngRepeat: slide in page.slides --><!-- end ngRepeat: slide in page.slides --><!-- ngRepeat: slide in page.slides --><!-- end ngRepeat: slide in page.slides --><!-- ngRepeat: slide in page.slides --><!-- end ngRepeat: slide in page.slides --><!-- ngRepeat: slide in page.slides --><!-- end ngRepeat: slide in page.slides --><!-- ngRepeat: slide in page.slides --><!-- end ngRepeat: slide in page.slides -->
    </div>
</div>

.directive('initialised', ['$rootScope',function($rootScope) {
    return {
        //restrict: 'A',
        link: function ($scope) {
            var to;
            var listener = $scope.$watch(function(){
                clearTimeout(to);
                to = setTimeout(function() {
                    App.init();
                    listener();
                    $rootScope.$broadcast('initialised');
                }, 150);
            });
        }
    };
}])