Currently, I am utilizing an angular plugin that can be found at the following link: https://github.com/angular-slider/angularjs-slider
The objective is to customize the "legends" produced by the directive. In order to achieve this customization, the directive accepts an Array as input on the rz-slider-options attribute. Here's an example:
In the Controller:
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'}]
}
}
}
In the 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>
The above code will generate the visuals shown here: https://i.sstatic.net/UZ4SM.png
The goal is to include a custom directive for modifying certain DOM elements associated with this directive. Assume that the name of my directive is my-directive, and I aim to accomplish the following:
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);
}
}
To implement the directive, update the HTML like so:
<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>
However, the console.log from my directive returns []. This suggests that the element directive rzslider may still be functioning when my directive is called.
Here is my question: How do I ensure that my directive is evaluated after the rzslider directive has completed its tasks?
A demo showcasing the code is available here: http://codepen.io/gpincheiraa/pen/mRBdBy
UPDATE
I have managed to get my directive to access the elements, but I needed to add a $timeout statement to achieve this. New questions arise:
Why wasn't my directive evaluated after the rzslider directive, and how can I achieve this without relying on $timeout?