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都会插入到data-ng-view中。

但是，我有一个Angular指令，当它发现在chat.html中有一个div的“聊天窗口”类时会执行Javascript函数（callMyJSFunction）：

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

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

在你的指令中，你可以这样做：

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

每次视图更改时如何触发AngularJS指令？

1 个答案: