For the example I am referring to, please visit: http://plnkr.co/edit/oYvwHnAIvFb4rUqqwsz3?p=preview
Hello, I am facing a situation where Angular seems to be compiling my code in a way that I do not fully understand. I have an outer directive that is iterating over an array and creating a new directive for each item in the array. Each of these inner directives is wrapped within a div with an ng-class attached to it.
The problem arises when I try to apply the ng-class to the wrapping div before the link function of the nested directives is executed. Currently, all controller and link functions of the nested directives are compiled before any ng-class functions are called on the wrapping div. You can observe this behavior in the provided plnkr example (check the console log for the order of execution). The desired print order should be as follows:
adding class to inner directive 1
Inner - Controller undefined
Inner - Link 1
adding class to inner directive 2
Inner - Controller undefined
Inner - Link 2
Inner - Controller undefined
...
I would appreciate any assistance in understanding this issue or achieving the desired compilation order.
relevant code: html
<div bn-outer>
<div ng-repeat="a in arr">
<div ng-class="classFunction(a)">
<span bn-inner ng-model="model" ng-init="model=a">
directive: {{a}}
</span>
</div>
</div>
</div>
angular
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
app.directive(
"bnOuter",
function() {
function Controller( $scope ) {
console.log( "Outer - Controller" );
$scope.arr = [1,2,3,4,5,6];
$scope.classFunction = function(int){
console.log("adding class to inner directive ", int);
};
}
function link( $scope, element, attributes, controller ) {
console.log( "Outer - Link" );
}
// Return directive configuration.
return({
controller: Controller,
link: link
});
}
);
app.directive(
"bnInner",
function() {
function Controller( $scope ) {
console.log( "Inner - Controller", $scope.model );
}
function link( $scope, element, attributes, controller ) {
console.log( "Inner - Link", $scope.model );
}
// Return directive configuration.
return({
controller: Controller,
link: link
});
}
);
Thank you!