w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
AngularJS directive - setting order for multiple directive elements (not priority for directives, but priority for the elements)

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>

The fooParent directive exists pretty much to do three things:

  1. Expose a function to foo items so they can be added to a general list
  2. Maintain a list of foos, which will be sorted during post-linking
  3. 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) {
                    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) {

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.

© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.