angularjs load one sibling directive before his brother

Question

I have two directive in the same hierarchy: directive1 and directive2 I want directive2 execute his controller before directive1 without change html directives hierarchy

app.directive('directive1', [function() {
    return {
      restrict: 'E',
      scope: {
      },
      templateUrl: 'My/views/directive1.html',
      controller: ['$scope', function ($scope) {
        console.log("Controller of Directive 1");
      }]
    }
  }]
)

app.directive('directive2', [function() {
    return {
      restrict: 'E',
      templateUrl: 'My/views/directive2.html',
      controller: ['$scope','$timeout', function ($scope,$timeout) {
        console.log("Controler of Directive 2");
      }]
    }
  }]
);

<div ng-controller="test" >
  <directive1></directive1>
  <directive2></directive2>
</div>

I am not sure but check if `priority` property works for you. Else you can use the link function to implement your logic. link function with higher priority are executed after lower priority link functions. — Chandermani, Mar 13 '15 at 11:35
My problem with priority is the two directive should be on the same element and it not my case. But thanks ant way — user3604968, Mar 13 '15 at 11:54
Sorry my bad, i interpreted the opposite. I don't think that is even possible, because of how compile and link phase works in angular. — Chandermani, Mar 13 '15 at 12:16

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

my first question would be why??, but in theory you can add a timeout which will push the directive to the end of the stack. wait for a broadcast event from the directive you are looking for... sort of:

    app.directive("firstDir", function(){
    return {
        restrict : 'E',
        controller : function($scope){        
            this.data = 'init value';

            this.set = function(value){
             //EMIT THE EVENT WITH DATA
              $scope.$emit('FIRST_DIR_UPDATED', value);
                this.data = value;
                // communication with second Directive ???
            }       
        },
        controllerAs : 'firstCtrl'
    };  
});

app.directive("secondDir", function(){
    return {
        restrict : 'E',
        controller : function($scope){    
          var _that = this;
          //LISTEN TO THE EVENT 
          $scope.$on('FIRST_DIR_UPDATED', function(e, data){
                 _that.data = data;
          });
          this.data = 'init value';   
        },
        controllerAs : 'secondCtrl'
    };  
});

this is a POC from answer

so the idea is one directive emits or broadcasts a message and the other catches is.. you can also add a flag so this will happen on condition

is this what you were looking for?

The why answer: in my first directive I'm using emit to the parent controller and from the parent controller I'm using broadcast to second directive but I found that when the view is load the second directive still not load so when the first directive send the call it not reach to directive 2. I Found a way with ng-if that help me to handle this buy change it to true when the dirextive2 is exist.(the ng-if is on the first directive) — user3604968, Mar 13 '15 at 13:39
ok :) I guess if your issue was just during the loading stage then ng-if will simply solve it... but otherwise you will still need to emit something ....sorry I couldnt help — Jony-Y, Mar 13 '15 at 16:35

angularjs load one sibling directive before his brother

1 Answers1