angularJS: wait for template to be evaluated before directive loads
The Situation
Lets say I have a directive, that has to access certain elements via ID, inside the element on which the directive is defined. The problem, that can occur, is that by the time the directive is evaluated, the child-elements are not yet. The result is, that I'm not able to access those elements by their ID.
Example
FIDDLE
<div ng-controller="MyCtrl">
<div color="elementId">
<div ng-repeat="item in items" id="{{ item.id }}">
{{ item.name }}
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive("color", function () {
return {
restrict: "A",
link: function (scope, element, attributes) {
var name = attributes.color,
el = element[0];
scope.$watch(name, function () {
var id = scope[name];
console.log(id); //id1
console.log(element.children().eq(0).attr("id")); //{{ item.id }}
element.find("#"+id).css("background-color","red");
});
}
};
});
function MyCtrl($scope) {
$scope.items = [
{ id:"id1", name:"item1" },
{ id:"id2", name:"item2" }
];
$scope.elementId="id1";
}
</script>
So my directive should just paint the background-color of the element with the id in $scope.elementId . (Btw. I know I can handle this simple example much easier, it should just illustrate the general issue). The problem is, that the ids of the elements inside ng-repeat are not there yet. As pointed out in the comment in the code, the id is still "{{ item.id }}". So angular didn't evaluate this part yet.
Question
My obvious question is now: how can I make my directive to wait for descendent elements to be completely evaluated?
Further Explaination
In my real application I want to have a directive, that enables me to scroll to a certain elements on the page. I also use a pagination directive to split up the elements I want to show. Because of the pagination, only the elements that are really visible, are in the DOM, so the invisible elements are already filtered out in my controller.
I also have a sidebar, where are small links to ALL the elements (not only the visible ones). When someone clicks on an element in the sidebar, two events should occur:
When I jump to the page, I basically have the situation, I described above. I have a complete new list of elements, that have to be processed by ng-repeat. But directly after that, I try to tell my scroll-directive, that it should scroll the element with the ID "xy", but this ID is not assigned yet.
Wrap your $scope.elementId = "Id1" with $timeout to notify angular to call listeners. (this can alternatively be done with $scope.$apply(), but it's causing another issue here)
here is the jsfiddle link
Code is -
var myApp = angular.module('myApp',[]);
myApp.directive("color", ['$timeout', function ($timeout) {
return {
restrict: "A",
link: function (scope, element, attributes) {
console.log(element)
var name = attributes.color,
el = element[0];
scope.$watch(name, function () {
var id = scope[name];
console.log(id); //id1
console.log(element.find("#"+id)); //{{ item.id }}
element.find("#"+id).css("background-color","red");
});
}
};
}]);
myApp.controller("MyCtrl", function($scope, $timeout) {
$scope.items = [
{ id:"id1", name:"item1" },
{ id:"id2", name:"item2" }
];
$timeout(function() {
$scope.elementId="id1";
});
});
If finally ended up writing a getElementById helper function, that returns a promise and has an internal interval, that check every 100ms if the element is present or not:
updated Fiddle
function getElementById(elementId) {
var deferred = $q.defer(),
intervalKey,
counter = 0,
maxIterations = 50;
intervalKey = setInterval(function () {
var element = document.getElementById(elementId);
if (element) {
deferred.resolve(element);
clearInterval(intervalKey);
} else if (counter >= maxIterations) {
deferred.reject("no element found");
clearInterval(intervalKey);
}
counter++;
}, 100);
return deferred.promise;
}
In my given example, I would use it like this:
getElementById(id).then(function (element) {
$(element).css("background-color","red");
}, function (message) {
console.log(message);
});
It's still not my preferred solution, but it works and solves my problem for now. But I'm still curious, if there is any better approach to this.
As per Jim Hoskins article, the following snippet should help you.
scope.$watch(name, function () {
setTimeout(function () {
scope.$apply(function () {
var id = scope[name];
console.log(id); //id1
console.log(element.find("#"+id)); //{{ item.id }}
element.find("#"+id).css("background-color","red");
}
}, 200))
});
Posting this answer to help people save some time(of course it's helpful to read the complete article)
链接地址: http://www.djcxy.com/p/95230.html