OK, here's my solution, although it's more a template.
Fiddle (check the console log to see the result)
I've wrapped the foo
directive in a fooParent
directive, like so:
<div foo-parent>
<div foo run="3"></div>
<div foo run="1"></div>
<div foo run="2"></div>
</div>
The fooParent
directive exists pretty much to do three things:
- Expose a function to
foo
items so they can be added to a general list - Maintain a list of
foos
, which will be sorted during post-linking - Process each
foo
in the run order specified.
It looks like this:
app.directive('fooParent', function() {
var foos = [];
return {
restrict: 'A',
controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $transclude) {
this.addFoo = function(runOrder, element) {
foos.push({
run: 1*runOrder, // make sure run is an integer
element: element
});
};
}],
link: function(scope, element, attrs) {
foos.sort(function(a, b) {
return a.run - b.run;
});
// process all children here
angular.forEach(foos, function(foo) {
console.log(foo);
});
}
};
});
And foo
simply looks like:
app.directive('foo', function() {
return {
restrict: 'A',
require: '^fooParent',
link: function(scope, element, attrs, fooParent) {
fooParent.addFoo(attrs.run, element);
}
};
});
Obviously, you will have to figure out the best way to handle remotely loading your content, especially if you want it to be serially loaded. Your foo
directive would become much more simplified, since the loading and processing would have to occur within fooParent
.