AngularJS Оценить директиву атрибутов после директивы Element

Question

Я использую следующий угловой плагин https://github.com/angular-slider/angularjs-slider

Моя цель состоит изменить «легенды», сгенерированные с помощью директивы. Для этого директива получает Array в атрибуте rz-slider-options. Пример:

В контроллере:

angular 
    .module('exampleApp') 
    .controller('MyController', Controller); 

function Controller() { 
    var $ctrl = this; 
    $ctrl.slider = { 
     value: 1, 
     options: { 
      showTicksValues: true, 
      stepsArray:[{value: 1, legend: 'red'}, {value: 1, legend: 'green'}, {value: 1, legend: 'blue'}, {value: 1, legend: 'red'}] 
     } 
    } 
} 

В HTML:

<div ng-app="exampleApp"> 
    <div ng-controller="MyController as $ctrl"> 
     <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ></rzslider> 
    </div> 
</div> 

Это будет генерировать следующее:

Моя идея это добавить пользовательскую директиву для изменения некоторые элементы DOM, связанные с этой директивой. Предположим, что моя директива это называется my-directive, я хочу сделать что-то вроде этого:

angular 
    .module('exampleApp') 
    .directive('reds', MenuGeo); 

MenuGeo.$inject = ['$timeout']; 

function MenuGeo($timeout){ 
    var ddo = { 
     restrict: 'A', 
     link: linkFn 
    }; 
    return ddo; 

    function linkFn(scope, el, attrs){ 
     var legendsList = el[0].getElementsByClassName('rz-tick-legend'); 
     console.log(legendsList); 
    } 
} 

Затем я изменил HTML как это:

<div ng-app="exampleApp"> 
     <div ng-controller="MyController as $ctrl"> 
      <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" reds></rzslider> 
     </div> 
    </div> 

Но console.log моей директивы возвращает []. Поэтому я думаю, что директива элемента rzslider продолжает работать, когда моя директива была вызвана.

Мой вопрос: Как добиться того, что моя директива будет оцениваться после того, как будет выполнена вся работа rzslider?

codepen он доступен здесь: http://codepen.io/gpincheiraa/pen/mRBdBy

UPDATE

Я был добиться того, что моя директива получить элементы, но мне нужно, чтобы добавить $timeout предложение для достижения этой цели. Мои новые вопросы:

Почему моя директива не была оценена после директивы rzslider и как я мог достичь этого без использования $ timeout?

Answer 1

Что вы ищете поведение по умолчанию, вы должны быть в состоянии получить доступ к HTML-разметка rzslider директивы с помощью JQuery-х element.children() function (чтобы получить прямые потомки) или element.find() function (чтобы найти потомков) изнутри функция компоновщика директивы. Что-то вроде этого, а затем делать то, что вы хотите с элементами.

app.directive("myDirective", function(){ 
    return function(scope, element, attrs){ 

     // Set all direct descendent's background colours to black 
     element.children().css("background", "black"); 

     // Set all direct descendent's text colours to white 
     element.children().css("color", "white"); 

     // Give the slider node a red border 
     $(".rzslider .rz-pointer").css("border", "3px solid red"); 

     // etc 
    }; 
}); 

Пример использования:

<rzslider rz-slider-model="150" my-directive></rzslider>