AngularJS와는 요소 지시어

Question

내가 https://github.com/angular-slider/angularjs-slider

내 목표는이 지침에 의해 생성 된 "전설"을 수정할 수있는 다음 각 플러그인을 사용하고

후 속성 지시자를 평가합니다. 이를 위해 지시문은 rz-slider-options 속성에서 Array를받습니다. 예 : 컨트롤러에서

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

는 :

내 생각은 사용자 지정 지시문을 추가의 수정 :

<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의 전체 작업이 완료된 후 내 지침이 어떻게 평가 될 것입니까? 내 지시어는 요소를 얻을 달성 봤는데

http://codepen.io/gpincheiraa/pen/mRBdBy

UPDATE하지만,이를 위해 나는 $timeout 문장을 추가해야합니다

A는 그것을 여기에서 사용할 수 codepen. 내 새로운 질문은 다음과 같습니다.

rzslider 지시문을 사용한 후에 내 지시문이 평가되지 않은 이유는 무엇입니까? $ timeout을 사용하지 않으면 어떻게됩니까?

Answer 1

당신이 추구하는 기본 동작, 당신은 사용 rzslider 지침의 HTML 마크 업에 액세스 할 수 있어야합니다입니다 내에서 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>