如何在我的应用程序中的所有部分之后运行自定义JavaScript'；s$rootScope是否已加载？

我有一个用

ng app=“blahApp”

指定的应用程序。在应用程序内部大约有10个

ng include

s，每个都基于URL通过HTTP加载模板，例如

ng include=“”/URL/to/template.html'

在应用程序将所有部分加载到DOM中后，如何执行单个函数

我问这个问题的原因是，加载的每个模板都有一些东西，否则（不使用Angular时）依赖于对jQuery插件的一次调用，该插件将启动

$（document.ready（））页面上的所有项目。但是现在，document.ready不起作用，因为直到document.ready之后一段时间才加载部分

<!-- HTML: -->

        <div id="tabs" ng-app="reportTabsApp" ng-controller="RootController">

            <!-- Load a bunch of partials here with ng-include -->

        </div>



<!-- my Angular code: -->

<script>
    var reportTabsApp = angular.module("reportTabsApp", []);

    reportTabsApp.controller('RootController', function($scope, $rootScope) {
        console.log($scope); // this works
        console.log($rootScope); // this works
        $scope.$on("$viewContentLoaded", function() {
            console.log(" -- VIEW CONTENT LOADED!!"); // This never happens.
        });
        $rootScope.$on("$viewContentLoaded", function() {
            console.log(" -- VIEW CONTENT LOADED!!"); // This also never happens.
        });
    });
</script>


var reportTabsApp=angular.module（“reportTabsApp”，[]）；
reportTabsApp.controller（'RootController'，函数（$scope，$rootScope）{
console.log（$scope）；//这很有效
console.log（$rootScope）；//这很有效
$scope.$on（“$viewContentLoaded”，函数（）{
console.log（“--VIEW CONTENT LOADED！！”）；//这永远不会发生。
});
$rootScope.$on（“$viewContentLoaded”，函数（）{
console.log（“--VIEW CONTENT LOADED！！”；//这也从未发生过。
});
});
正如Eliran在评论中所建议的，答案是任意决定何时加载所有部分。我想到了这个：

<script>
    var yourApp = angular.module("yourApp", []);

    yourApp.controller('YourController', function($scope) {
        $scope.includeCounter = 0;

        $scope.partials = [
            '/path/to/template1.html',
            '/path/to/template2.html',
            '/path/to/template3.html'
            // etc...
        ];

        // in your html you use ng-repeat to repeat an element, and on each of
        // those elements you have ng-include to load the above partials.

        $scope.$on("$includeContentLoaded", function() {
            $scope.includeCounter++;
            if ($scope.includeCounter == $scope.partials.length) { // if all partials loaded.

                 console.log(" -- ALL PARTIALS LOADED!!");
                 // do what you need now that all partials are loaded.
            }
        });
    });
</script>


var yourApp=angular.module（“yourApp”，[]）；
yourApp.controller（'YourController'，函数（$scope）{
$scope.includeCounter=0；
$scope.partials=[
“/path/to/template1.html”，
“/path/to/template2.html”，
“/path/to/template3.html”
//等等。。。
];
//在html中，使用ng repeat来重复元素，并在每个元素上重复
//要加载上述部分，必须包含这些元素。
$scope.$on（“$includeContentLoaded”，函数（）{
$scope.includeCounter++；
if（$scope.includeCounter==$scope.partials.length）{//if已加载所有部分。
log（“--ALL PARTIALS LOADED！！”；
//现在所有部分都已加载，请执行所需操作。
}
});
});
您可以利用
$includeContentLoaded
任意决定何时加载所有部分，但从您的描述来看，我怀疑您的方法是缺乏的-您当前在“dom就绪”上所做的可以以不同的方式完成（例如，内部指令）。另一件事--您是否尝试过收听
$viewContentLoaded
？“应该可以了。”EliranMalka是的，我试过$viewContentLoaded，但运气不好。请参阅我更新的代码示例。让我看看$includeContentLoaded会发生什么。啊哈$includeContentLoaded作品！！我想我仍然需要学习指令，而不仅仅是在那里运行jQuery。谢谢Eliran！问题是这是我第一次使用AngularJS。。。迁移整个jQuery应用程序。xD但是的，该教程非常有用。：）