angularjs $ rootscope事件不会在父指令上触发

Question

I have two directive on my design.

var app = angular.module("app",[]);

app.directive("dirContainer", function($rootScope){
      return {
       template: "<div><clock></clock></div>",
       link:function(scope){        
        $rootScope.$on("onClockCreated",function(){
                alert(1)
        })
      }
    }
});

app.directive("clock", function($rootScope){
      return {
       template: "<div>clock</div>",
       link:function(scope){
            var clock = { time: "10:12" };

          $rootScope.$broadcast("onClockCreated",clock);
      }
    }
});

I want to get clock directive created event with $rootScope broadcast. But container directive does not populate the alert.

This is DEMO of application.

UPDATE:

I have added scope.$emit and it populated alert.

app.directive("dirContainer", function($rootScope){
        return {
        template: "<div><clock></clock></div>",
      compile:function(scope){          
        $rootScope.$on("onClockCreated",function(){
                alert(1)
        })

        $scope.$emit("onClockCreated",function(){
                alert(1)
        })
      }
    }
});

But I could not understand. How it wroks?

Answer 1

You have got a timing problem here. The link function of the clock directive is called before the link function of your dirContainer directive. You can see it, if you put a console.log in each link function. So your event is emitted before the dirContainer directive is listening. If you could tell us what you are trying to achieve, we maybe could suggest you an appropriate solution.

Answer 2

Just change link to compile

compile:function(scope){        
            $rootScope.$on("onClockCreated",function(){
                    alert(1)
            })
          }

here is demo https://jsfiddle.net/avsubL66/

Answer 3

You can even do this in way by creating parent child directive manner

 <div ng-app="myapp">
<container>
  <clock></clock>
  </container>
   </div>
var app = angular.module("myapp",[]);


app.directive("container", function () {
  return {
    restrict: "E",
    controller: function () {
      this.clockcreated = function (message) { 
        alert("It says: " + message);
      };
    }
  };
});


app.directive("clock", function () {
  return {
    restrict: "E",
    require: "^container",
    link: function (scope, element, attrs, containerCtrl) {
      containerCtrl.clockcreated("Clock created");
    }
  };
});

Working link - https://jsfiddle.net/2nqhsvmp/1/

Answer 4

One way to solve this problem is to expose an api for your parent controller.

Working fork of your fiddle .

This resolves your concerns with race conditions.

var app = angular.module("app",[]);

app.directive("dirContainer", function($rootScope){
    return {
    template: "<div><clock></clock></div>",
    controller: ['$scope', function DirContainerController($scope) {
        this.sendAlert = function() {
            alert(1);
        };
    }],
    }
});

app.directive("clock", function($timeout, $rootScope){
    return {
    require: '^^dirContainer',
    template: "<div>clock</div>",
    link:function(scope, element, attrs, dirCtrl){
        var clock = { time: "10:12" };
            dirCtrl.sendAlert();
        }
    }
});

Answer 5

Here is the solution,

your dirContrainer directive should listen to the broadcast on his scope . Not his rootScope .

app.directive("dirContainer", function($rootScope){
        return {
        template: "<div><clock></clock></div>",
      link:function(scope){         
        scope.$on("onClockCreated",function(clock){
                alert(1)
        })
      }
    }
});

And also make sure to put a $timeout when you are doing this testing because broadcast.$on is not ready when you $broadcast from the clock directive.

app.directive("clock", function($rootScope, $timeout){
        return {
        template: "<div>clock</div>",
      link:function(scope){
            var clock = { time: "10:12" };

          $timeout(function () {
            $rootScope.$broadcast("onClockCreated",clock);
          });

      }
    }
});