AngularJSは、Elementディレクティブ

Question

後、私は私の目標は、ディレクティブによって生成された「伝説」を変更され https://github.com/angular-slider/angularjs-slider

次の角プラグインを使用しています。属性ディレクティブを評価しますこのため、ディレクティブはrz-slider-options属性で配列を受け取ります。例：これは、以下を生成します

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

：

私の考え、修正するために、カスタムディレクティブを追加のHTMLに

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'}] 
     } 
    } 
} 

：コントローラで

このディレクティブに関連するいくつかの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の作業全体が完了した後、私の指示が評価されるのでしょうか？

Aは、それがここで利用可能ですcodepen：http://codepen.io/gpincheiraa/pen/mRBdBy

UPDATE

私は私のディレクティブは、要素を取得することを実現してきたが、私はこれを実現するための$timeout文を追加する必要があります。私の新しい質問は以下の通りです：

rzsliderディレクティブの後に私のディレクティブが評価されなかったのはなぜですか？あなたが求めて何

Answer 1

は、デフォルトの動作である、あなたはjQueryのelement.children() function（直接の子孫を得るために）、またはelement.find() functionを使用してrzsliderディレクティブのHTMLマークアップにアクセスすることができるはずです（すべての子孫を見つけるために）の中から、ディレクティブのリンカー機能。このような何か、そしてあなたが要素で欲しいものをやってください。

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>