Javascript AngularJS在元素指令之后计算属性指令

我正在使用下面的angular插件

我的目标是修改指令生成的“图例”。为此，指令接收rz滑块选项属性上的数组。例如：

在控制器中：

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>

然后，我对HTML进行如下修改：

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);
    }
}

<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的全部工作后，如何评估我的指令？

代码笔在以下位置提供：

更新

我已经实现了我的指令获取元素，但是我需要添加一个

$timeout

语句来实现这一点。我的新问题是：

---

为什么我的指令没有在指令rzslider之后进行评估，以及我如何在不使用$timeout的情况下实现这一点？

您寻求的是默认行为，您应该能够使用jQuery的访问

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>

我看到了您更新的问题以及您的codepen示例。问题似乎是

el[0]

部分，该部分立即求值（在加载DOM之前）。另一方面，诸如

el.children（）

和

el.find（）

等函数在其DOM节点加载后执行，因此可以用来代替示例中的

el[0]

。我认为您可以使用

el[0]

，但只有在加载DOM之后，为了确保这一点，必须将其包装在

$timeout

函数中，或者您可以使用JQuery的

$（document）.ready（function（）{..}

函数以获得类似效果。