How to trigger an AngularJS directive every time the view changes?

Question

I have this in my 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>

Whenever the controller/route changes, the html is inserted into data-ng-view.

However, I have an Angular directive which executes a Javascript function (callMyJSFunction) when it sees that there is a class 'chat-window' attached to a div in 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'
                });
            }
        }
    });

What I want to happen is that every time the view changes, this Javascript function is called again. How do I do this?

Note that I don't want to move the chat.html into every html file - there are 20+ different views!

Answer 1

You can use the viewContentLoaded event that is emitted from the ngView directive.

In your directive, you could do this:

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(...);
            });
        }
    }
}]);