我有一个函数，我想在加载页面内容后调用它。我读到了$ viewContentLoaded，它对我不起作用。我正在寻找像
这样的东西document.addEventListener('DOMContentLoaded', function () {
//Content goes here
}, false);
以上调用在AngularJs控制器中对我不起作用。
答案 0 :(得分：155)
根据$viewContentLoaded的文档，它应该有效
发出每次重新加载ngView内容时都会发出。
$viewContentLoaded事件意味着要接收此事件，您需要像
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
从MainCtrl您可以听取此事件
$scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
});
检查Demo
答案 1 :(得分：92)
Angular＆lt; 1.6.x版
new File(folder-path).mkdirs();
Angular＆gt; = 1.6.X
angular.element(document).ready(function () {
console.log('page loading completed');
});
答案 2 :(得分：73)
使用指令和角元素ready方法如下：
.directive( 'elemReady', function( $parse ) {
return {
restrict: 'A',
link: function( $scope, elem, attrs ) {
elem.ready(function(){
$scope.$apply(function(){
var func = $parse(attrs.elemReady);
func($scope);
})
})
}
}
})
<div elem-ready="someMethod()"></div>
或那些使用 controller-as 语法的人......
<div elem-ready="vm.someMethod()"></div>
这样做的好处是，您可以根据自己的用户界面广泛或细化，并从控制器中删除DOM逻辑。我认为这是推荐的 Angular 方式。
如果您在同一节点上运行其他指令，则可能需要优先使用此指令。
答案 3 :(得分：56)
您可以通过在HTML元素之后添加{{YourFunction()}}来直接调用它。
这是Plunker Link。
答案 4 :(得分：19)
我在处理谷歌图表时必须实现这个逻辑。我做的是在我添加的控制器定义的html结尾处。
<body>
-- some html here --
--and at the end or where ever you want --
<div ng-init="FunCall()"></div>
</body>
并且在该函数中只需调用您的逻辑。
$scope.FunCall = function () {
alert("Called");
}
答案 5 :(得分：3)
您可以在angular js中调用onload事件的javascript版本。此ng-load事件可应用于任何dom元素，例如div，span，body，iframe，img等。以下是在现有项目中添加ng-load的链接。
download ng-load for angular js
以下是iframe的示例，加载后 testCallbackFunction 将在控制器中调用
示例
JS
// include the `ngLoad` module
var app = angular.module('myApp', ['ngLoad']);
app.controller('myCtrl', function($scope) {
$scope.testCallbackFunction = function() {
//TODO : Things to do once Element is loaded
};
});
HTML
<div ng-app='myApp' ng-controller='myCtrl'>
<iframe src="test.html" ng-load callback="testCallbackFunction()">
</div>
答案 6 :(得分：2)
如果您正在获取$ digest正在进行中的错误，这可能会有所帮助：
return {
restrict: 'A',
link: function( $scope, elem, attrs ) {
elem.ready(function(){
if(!$scope.$$phase) {
$scope.$apply(function(){
var func = $parse(attrs.elemReady);
func($scope);
})
}
else {
var func = $parse(attrs.elemReady);
func($scope);
}
})
}
}
答案 7 :(得分：2)
var myM = angular.module('data-module');
myM.directive('myDirect',['$document', function( $document ){
function link( scope , element , attrs ){
element.ready( function(){
} );
scope.$on( '$viewContentLoaded' , function(){
console.log(" ===> Called on View Load ") ;
} );
}
return {
link: link
};
}] );
以上方法适合我
答案 8 :(得分：0)
通过设置窗口加载事件
的事件监听器，可以部分满足页面加载后的运行window.addEventListener("load",function()...)
在角度的module.run(function()...)内，您将可以访问模块结构和依赖项。
您可以broadcast和emit个通讯桥接事件。
例如：
答案 9 :(得分：0)
我在模板中使用了{{myFunction()}}，但后来在控制器中使用$timeout找到了另一种方式here。以为我会分享它，对我很有用。
angular.module('myApp').controller('myCtrl', ['$timeout',
function($timeout) {
var self = this;
self.controllerFunction = function () { alert('controller function');}
$timeout(function () {
var vanillaFunction = function () { alert('vanilla function'); }();
self.controllerFunction();
});
}]);
答案 10 :(得分：0)
如果您想要完全加载某个元素，请在该元素上使用ng-init。
e.g。 <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>
initModalFacultyInfo（）函数应存在于控制器中。
答案 11 :(得分：0)
我发现如果你有嵌套视图 - 每个嵌套视图都会触发$ viewContentLoaded。我已创建此解决方法以查找最终的$ viewContentLoaded。似乎可以按照Prerender的要求设置$ window.prerenderReady（进入主app.js中的.run（））：
// Trigger $window.prerenderReady once page is stable
// Note that since we have nested views - $viewContentLoaded is fired multiple
// times and we need to go around this problem
var viewContentLoads = 0;
var checkReady = function(previousContentLoads) {
var currentContentLoads = Number(viewContentLoads) + 0; // Create a local copy of the number of loads
if (previousContentLoads === currentContentLoads) { // Check if we are in a steady state
$window.prerenderReady = true; // Raise the flag saying we are ready
} else {
if ($window.prerenderReady || currentContentLoads > 20) return; // Runaway check
$timeout(function() {checkReady(currentContentLoads);}, 100); // Wait 100ms and recheck
}
};
$rootScope.$on('$stateChangeSuccess', function() {
checkReady(-1); // Changed the state - ready to listen for end of render
});
$rootScope.$on('$viewContentLoaded', function() {
viewContentLoads ++;
});
答案 12 :(得分：0)
var myTestApp = angular.module("myTestApp", []);
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
alert("is called on page load.");
};
});
答案 13 :(得分：0)
适用于我的解决方案如下
app.directive('onFinishRender', ['$timeout', '$parse', function ($timeout, $parse) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
if (!!attr.onFinishRender) {
$parse(attr.onFinishRender)(scope);
}
});
}
if (!!attr.onStartRender) {
if (scope.$first === true) {
$timeout(function () {
scope.$emit('ngRepeatStarted');
if (!!attr.onStartRender) {
$parse(attr.onStartRender)(scope);
}
});
}
}
}
}
}]);
以下是控制器代码
$scope.crearTooltip = function () {
$('[data-toggle="popover"]').popover();
}
HTML代码如下
<tr ng-repeat="item in $data" on-finish-render="crearTooltip()">
答案 14 :(得分：-31)
我使用setInterval等待加载的内容。我希望这可以帮助你解决这个问题。
var $audio = $('#audio');
var src = $audio.attr('src');
var a;
a = window.setInterval(function(){
src = $audio.attr('src');
if(src != undefined){
window.clearInterval(a);
$('audio').mediaelementplayer({
audioWidth: '100%'
});
}
}, 0);