如何在我的應用程序的$ rootScope中的所有部分被加載後運行自定義JavaScript？

我有一個應用程序指定ng-app="blahApp"。在應用程序內部，有十個左右的ng-include，每個都通過HTTP根據URL加載模板，例如， 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>

來源

2014-03-30 trusktr

你可以任意決定** **當所有的諧音被加載，使用'$ includeContentLoaded'爲，但是從你的描述，我懷疑你的做法是缺乏 - 你現在做什麼在「準備就緒」可以以不同的方式完成（例如內部指令）。 [你讀過這個？]（http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background） –

另一件事 - 你嘗試收聽'$ viewContentLoaded'嗎？應該這樣做。 –

@EliranMalka是的，我試過$ viewContentLoaded沒有運氣。看到我更新的代碼示例。讓我看看$ includeContentLoaded會發生什麼。 – trusktr

答案，如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>

來源

2014-04-01 04:54:56 trusktr

如何在我的應用程序的$ rootScope中的所有部分被加載後運行自定義JavaScript？

回答

相關問題