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

Question

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

我的目标是修改指令生成的“图例”。为此，该指令在 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 的全部工作后，我的指令将如何评估？

这里有一个代码笔：http://codepen.io/gpincheiraa/pen/mRBdBy

更新

我已经实现了我的指令获取元素，但我需要添加一个$timeout 语句来实现这一点。我的新问题是：

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

Answer 1

您所寻求的是默认行为，您应该能够使用 jQuery 的 element.children() function（获取直接后代）或 @ 访问 rzslider 指令的 html 标记987654322@（查找任何后代）来自指令的链接器函数。像这样，然后对元素做你想做的事。

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>