AngularJS在Element指令之后评估Attribute指令

Question

我正在使用以下角度插件https://github.com/angular-slider/angularjs-slider

我的目标是修改指令生成的“传说”。 为此，该指令在rz-slider-options属性上接收一个Array。 例：

在控制器中：

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

您要查找的是默认行为，您应该能够使用jQuery的element.children（）函数 （以获取直接后代）或element.find（）函数 （以查找任何后代）来访问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>