内容加载后调用的 AngularJs 事件

我有一个函数，我想调用后页面内容加载。我读到过 $viewContentLoadedand 它对我不起作用。我正在寻找类似

document.addEventListener('DOMContentLoaded', function () {
//Content goes here
}, false);

在 AngularJs 控制器中上述呼叫不工作。

484519 次浏览
小开

根据 $viewContentLoaded的文档，它应该能工作

每次重新加载 ngView 内容时发出。

发出 $viewContentLoaded事件，这意味着要接收此事件，您需要一个类似

<div ng-controller="MainCtrl">
<div ng-view></div>
</div>

从 MainCtrl你可以听到事件

  $scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
});

检查 演示

小开

2015.06.09

使用指令和角度元素 ready方法如下:

JS

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

Html

<div elem-ready="someMethod()"></div>

或者对于那些使用 控制器语法的人..。

<div elem-ready="vm.someMethod()"></div>

这样做的好处是，您可以根据自己的需要对 UI 进行宽泛或细化，并且可以从控制器中删除 DOM 逻辑。我认为这是推荐的 角度方式。

如果有其他指令在同一节点上运行，您可能需要对该指令进行优先级排序。

小开

角度 < 1.6. X

angular.element(document).ready(function () {
console.log('page loading completed');
});

角度 > = 1.6. X

angular.element(function () {
console.log('page loading completed');
});
小开

可以通过在 HTML 元素后面添加 \{\{YourFunction()}}来直接调用它。

这是 Plunker Link。

小开

通过将事件侦听器设置为窗口加载事件，可以部分满足页面加载之后运行的要求

window.addEventListener("load",function()...)

在角度的 module.run(function()...)内部，你可以访问所有的模块结构和依赖关系。

您可以为通信桥接器设置 broadcast和 emit事件。

例如:

  • 模块设置 onload 事件和构建逻辑
  • 模块在逻辑需要时向控制器广播事件
  • 控制器将监听和执行自己的逻辑基于模块上载进程。
小开

在处理谷歌图表时，我必须实现这个逻辑。我所做的就是在控制器定义的 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");
}
小开

如果你得到的是一个已经在进行中的 $摘要错误，这可能会有所帮助:

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);
}


})
}
}
小开

我使用 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);
小开 
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
};


}] );

以上方法对我很有效

小开

我在模板中使用了 \{\{myFunction()}}，但是后来发现了另一种使用控制器中的 $timeout的 给你方法。我觉得我应该分享一下，对我很有用。

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


}]);
小开

如果希望某个元素完全加载，请对该元素使用 n- init。

例如 <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>

控制器中应该存在 initModalFacultyInfo ()函数。

小开

我发现，如果您有嵌套的视图-$viewContentLoded 会为每个嵌套的视图触发。我已经创建了这个工作区来查找最终的 $viewContentLoaded。似乎工作正常，设置 $window.prerenderReady，按照 Prerender 的要求(进入。在主 app.js 中运行() :

// 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 ++;
});
小开 
var myTestApp = angular.module("myTestApp", []);
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
alert("is called on page load.");
};
});
小开

对我有效的解决方案如下

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()">
小开

你可以调用 javascript 版本的 onload 事件。这个 ng-load 事件可以应用于任何 dom 元素，比如 div、 span、 body、 iframe、 img 等等，下面是在现有项目中添加 ng-load 的链接。

下载角度 js 的 n- 负载

以下是 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
};


});

超文本标示语言

  <div ng-app='myApp' ng-controller='myCtrl'>
<iframe src="test.html" ng-load callback="testCallbackFunction()">
</div>

提交答案