私はangularjsディレクティブを設定するとtemplateUrl $ rootScopeイベントが移入されません

Question

私はそのうちの一つが、このような別のものを得るためにメッセージをブロードキャストすることを2つのディレクティブがあります（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"}); 
     } 
     }; 
    } 
); 

このギーブスメッセージを。

私の指示のテンプレートURLが必要です。このように設定してください（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関数を実行するには、Angularにテンプレートが必要です。しかし、テンプレートはHTMLファイルから非同期にロードされるようになりました。したがって、最初の指令のリンク関数が実行される前にメッセージがブロードキャストされ、したがってrootScopeのリスナーが作成される前にブロードキャストされます。

Answer 2

ソリューションはtemplateUrl

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

EXAMPLE