子元素在指令

失蹤

我有一個定義的指令：子元素在指令


$(function() { 
    angular.module(['myApp']).directive('rootSlider', function() { 
     return { 
      restrict: 'E', 
      template: '<ul><li ng-repeat="item in items"><img ng-src="{{item.url}}" /></li></ul>',   
      scope: { 
       items: '=' 
      }, 
      replace: true, 
      compile: function ($templateElement, $templateAttributes) { 
       return function ($scope, $element, $attrs) { 

        var $scope.items.length //expect 2, get 2 
        var numChildren $element.children().length //expect 2, get 0 
       }; 
      } 
     }; 
    }); 
});

雖然$scope.items酒店有2項，並在最後呈現的DOM有兩個<li>元素，在鏈接功能$element尚未有孩子。

在角度生命週期的哪個點可以得到完全呈現的元素（我的意圖是在這裏使用jQuery滑塊插件）。

標記是

<root-slider items="ModelPropertyWithTwoItems"></root-slider>

UPDATE：

我能得到這個與$ watchCollection的組合和$ evalAsync正常工作。

$(function() { 
    angular.module(['myApp']).directive('rootSlider', ['$timeout', function ($timeout) { 
     return { 
      restrict: 'E', 
      template: '<ul class="bxslider"><li ng-repeat="item in items"><img ng-src="{{item.url}}" /></li></ul>', 
      scope: { 
       items: '=' 
      }, 
      compile: function ($templateElement, $templateAttributes) { 
       return function ($scope, $element, $attrs) { 
        $scope.$watchCollection('items', function (newCollection, oldCollection) { 
         if ($scope.slider) { 
          $scope.$evalAsync(function() { 
           $scope.slider.reloadSlider(); 
          }); 
         } 
         else { 

          $scope.$evalAsync(function() { 
           $scope.slider = $element.find('.bxslider').bxSlider(); 
          }); 
         } 

        }); 

       }; 
      } 
     }; 
    } ]); 
});

腕錶系列閃光一次，在指令初始化（因爲它是一個集合，你不能比較的NEWVALUE和屬性oldValue，所以我最終將滑塊對象到獲取的實例創建的$範圍

我使用$ evalAsync推遲jQuery代碼的執行，目前爲止所有瀏覽器都避免閃爍（這似乎是在$ timeout（function（）{}，0）之前運行的。）

上面的解決方案可能可以簡化，只需返回一個鏈接函數（而不是一個編譯函數，結果是不必要的）。

來源

2013-12-19 Joe Enzminger

等待DOM完成在Angular中渲染的常用方法是使用$timeout。這裏有各種選項的explanation和here's another look at this。

所以這應該爲你解決這個問題。在您的指令包括$timeout：

angular.module(['myApp']).directive('rootSlider', function ($timeout) {

然後換你

$timeout(function() { 
    var numChildren $element.children().length; 
},0);

已經有一個request for a more official feature supporting this和這裏的角自己Misko Hevery的評論之前，他關閉了該問題：

所以這是一個非常複雜的問題。問題是，與數據綁定沒有明確的開始/結束更新週期，它是繼續。我相信這不是你正在尋找的答案，但角度不像其他框架，所以它依靠不同的規則生活。

你會怎麼想這會工作？您收到這些通知的時間和時間。

到目前爲止，它看起來像沒有人想出了通過3emad這個問題發佈接近尾聲時迴應：

我只是好奇約$超時一面

我認爲這種方法令人鼓舞，沒有人發佈負面消息。

來源

2013-12-19 01:41:31 KayakDave

這可以工作，但會創建一個臨時顯示無格式元素的情況。似乎會有一個更具體的框架鉤。 –

$ timeout對此非常普遍 - 但我完全明白它看起來很糟糕。我很困惑，你看到一個你以前沒有看過的閃光燈，因爲這不應該延遲加載圖像/模板。還有其他的東西在等着嗎？這是一個演示，延遲時間爲2秒，但模板正常加載：jsfiddle.net/csnGL/2 – KayakDave

將此標記爲答案。 $ watch解決方案沒有具體解決該問題（儘管它很有幫助），並且鏈接到您發佈的功能請求導致我到$ evalAsync。謝謝！ –

您可能想用$watch來追趕模型的變化。

$scope.$watch('items', function(newValue) { 
    // logic about items here... 
}, true); // pass true since it should be an array

來源

2013-12-19 02:48:38

謝謝。我發現了類似的東西。我將很快更新這個問題，但是我現在使用$ watchCollection，並且在初始化children（）時觸發。length是2（如預期的那樣）。它仍然在IE（9）上閃爍，但它看起來可以與其他瀏覽器一起使用。 –

子元素在指令

回答

相關問題