如何在每次視圖更改時觸發AngularJS指令？

Question

我有這個在我的index.html：

<div class="content"> 
     <div data-ng-include="'views/title.html'"></div> 
     <div data-ng-view=""></div> 
    </div> 

    <div data-ng-include="'views/chat.html'"></div> 

每當控制器/路由發生變化，HTML插入數據-NG-視圖。

不過，我有一個角指令，它執行JavaScript函數（callMyJSFunction）時，看到有連接到一個div中chat.html一個類的聊天窗口'：

angular.module('myApp').directive('chatWindow', function() { 
     return { 
      restrict: 'C', 
      link: function(scope, element, attrs) { 
       element.callMyJSFunction({ 
        hostname: 'www.domain.com', 
        data: 'other data' 
       }); 
      } 
     } 
    }); 

我想要發生的是每次視圖更改時，都會再次調用此Javascript函數。我該怎麼做呢？

請注意，我不想將chat.html移動到每個html文件中 - 有20多個不同的視圖！

Answer 1

您可以使用ngView指令發出的viewContentLoaded事件。

在你的指令，你可以這樣做：

angular.module('myApp').directive('chatWindow', ['$rootScope', function($rootScope) { 
    return { 
     restrict: 'C', 
     link: function(scope, element, attrs) { 
      element.callMyJSFunction({ 
       hostname: 'www.domain.com', 
       data: 'other data' 
      }); 

      $rootScope.$on('$viewContentLoaded', function() { 
       element.callMyJSFunction(...); 
      }); 
     } 
    } 
}]);