Когда я установил angularjs директиву templateUrl $ rootScope событие не заселить

Question

У меня есть две директивы, что один из них вещать сообщение, чтобы получить еще один такой: (demo)

angular.module('app', []); 
angular.module('app').directive('foo', 
    function($rootScope) { 
     return { 
     restrict: 'EAC', 
     link: function($scope, element, attrs, controller) { 
      $rootScope.$on("onStart", function(e,d){ 
       alert(d.message) 
      }); 
     } 
     }; 
    } 
); 
angular.module('app').directive('bar', 
    function($rootScope) { 
     return { 
     restrict: 'EAC',  
     link: function($scope, element, attrs, controller) { 
        $rootScope.$broadcast("onStart", {message: "start"}); 
     } 
     }; 
    } 
); 

This Gieves сообщение.

Но мне нужен шаблон шаблона моей директивы и установить его так (demo).

angular.module('app').directive('foo', 
    function($rootScope) { 
     return { 
     restrict: 'EAC', 
     templateUrl: "tpl.html", 
     link: function($scope, element, attrs, controller) { 
      $rootScope.$on("onStart", function(e,d){ 
       alert(d.message) 
      }); 
     } 
     }; 
    } 
); 

Но оно не заполняет предупреждение сейчас.

Answer 1

Для выполняемой функции link Угловой нужен шаблон. Но шаблон теперь загружается из html-файла асинхронно. Следовательно, ваше сообщение транслируется до того, как функция ссылки в первой директиве даже выполняется и, таким образом, до того, как будет создан слушатель в корневом каталоге.

Answer 2

Решение может использовать template вместо templateUrl

template: "<div>Content of the template.</div>" 

EXAMPLE