Question

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

我的目标是修改＆＃34;传说＆＃34;由指令生成。为此，该指令在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的整个工作后，如何实现我的指令评估？

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

更新

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

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

Answer 1

您寻求的是默认行为，您应该能够使用jQuery的 element.children() function 访问doc.getBody().appendParagraph(str);指令的html标记（直接获取）后代）或指令的链接器函数中的 element.find() function （以查找任何后代）。像这样的东西然后用元素做你想做的事。

rzslider

样本用法：

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

AngularJS在Element指令

1 个答案: