Question

一旦加载了页面中的所有部分，如何运行一行jQuery。 $（document）.ready和$（document）.load没有运气还有其他方法吗？

app.controller('PageCtrl', function () {
  $(document).ready( function() {
    $(".left-nav").height( $('.content-area').height());
  });
});

Answer 1

任何以角度加载的模板，首先它存储在$ templateCache中然后它被使用。第二次直接从$ templateCache中获取。最好在应用程序运行块

内的应用程序启动时加载所有模板

//app will be your current app name
app.run(['$templateCache','$q','$http', function($templateCache, $q, $http){
  var promises = [];
  promises.push($http.get('partials/views/template1.html',{ cache : $templateCache }));
  promises.push($http.get('partials/views/template2.html',{ cache : $templateCache }));
  promises.push($http.get('partials/views/template3.html',{ cache : $templateCache }));
  $q.all(promises, function (data) { 
    //write code here which want to load after all templates get loaded
    angular.element(".left-nav").css('height', angular.element('.content-area')[0].offsetHeight);
   //or if you have jquery file included the try below commented line
   //angular.element(".left-nav").css('height', angular.element('.content-area')[0].height();
 });
}]);

以角度 $ = angular.element 。

希望这会对你有所帮助。

Answer 2

您可以使用控制器。

HTML：

<div data-ng-controller="includeCtrl" data-ng-include="'/partials/file.html'"></div>

角：

app.controller('PageCtrl', function () {
    $scope.includesLoaded = 0;
    $scope.totalIncludes  = 10; //The total number of includes you have
    $scope.$watch(function($scope) { return $scope.includesLoaded },
        function(newValue, oldValue) {
            if(newValue === $scope.totalIncludes) {
                // Your code here
            }
        }
    );

}); 

app.controller("includeCtrl", ["$timeout",
    function($timeout) {
        var init = function() {
            $timeout(function() {
                $scope.includesLoaded++;
            }, 0);
        };
        init();
    }
]);

说明：通过保持变量与加载的包含数量，您可以判断它们是否都已加载。 $scope.$watch侦听第一个函数中返回的变量的差异，并通过调用第二个函数对其作出反应。现在，$scope.$watch只会在Angular摘要周期中触发。 $timeout调用循环，但可能不需要，我没有测试代码。由于PageCtrl必须是应用程序的顶级控制器，因此$ scope.includesLoaded可用于其他控制器，但同样，我不确定。如果它不起作用，请改用$ rootScope。

不过，pankajparkar的回答更好。仅需2美分作为参考。

加载所有部分（ng-includes）后运行一个函数

2 个答案: