我有一个要在加载页面内容后调用的函数。我阅读了有关 $viewContentLoaded 的信息，但它对我不起作用。我正在寻找类似的东西
document.addEventListener('DOMContentLoaded', function () {
//Content goes here
}, false);
上面的调用在 AngularJs 控制器中对我不起作用。
问问题
472741 次
15 回答
164
根据$viewContentLoaded的文档，它应该可以工作
每次重新加载 ngView 内容时发出。
$viewContentLoaded发出事件，这意味着要接收此事件，您需要一个父控制器，例如
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
从MainCtrl你可以听事件
$scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
});
检查演示
于 2014-02-12T07:12:44.917 回答
112
角度 < 1.6.X
angular.element(document).ready(function () {
console.log('page loading completed');
});
角度 >= 1.6.X
angular.element(function () {
console.log('page loading completed');
});
于 2015-05-15T11:54:33.847 回答
76
固定 - 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 逻辑。我认为这是推荐的Angular方式。
如果您有其他指令在同一节点上运行，您可能需要优先考虑该指令。
于 2015-04-10T21:52:51.633 回答
68
{{YourFunction()}}您可以通过在 HTML 元素之后添加来直接调用它。
这是一个Plunker Link.
于 2015-05-22T12:15:21.797 回答
23
在处理谷歌图表时，我必须实现这个逻辑。我所做的是在我添加的控制器定义内的 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");
}
于 2016-02-26T10:18:45.303 回答
4
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
};
}] );
以上方法对我有用
于 2017-01-24T04:15:46.080 回答
3
您可以在 Angular js 中调用 javascript 版本的 onload 事件。此 ng-load 事件可以应用于任何 dom 元素，如 div、span、body、iframe、img 等。以下是在现有项目中添加 ng-load 的链接。
以下是 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>
于 2019-03-30T05:30:39.727 回答
2
我{{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();
});
}]);
于 2017-03-09T01:02:30.013 回答
2
如果您收到 $digest already in progress 错误，这可能会有所帮助：
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);
}
})
}
}
于 2016-03-15T19:17:53.110 回答
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 ++;
});
于 2017-11-08T16:25:46.173 回答
0
var myTestApp = angular.module("myTestApp", []);
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
alert("is called on page load.");
};
});
于 2018-02-23T06:37:22.870 回答
0
通过为窗口加载事件设置事件侦听器，应该部分满足在页面加载后运行
window.addEventListener("load",function()...)
在module.run(function()...)angular 内部，您将可以访问模块结构和依赖项。
你可以broadcast和emit事件建立沟通的桥梁。
例如：
- 模块设置 onload 事件和构建逻辑
- 当逻辑需要时，模块向控制器广播事件
- 控制器将根据模块加载过程侦听并执行自己的逻辑。
于 2016-01-28T19:44:30.720 回答
0
如果您希望某个元素完全加载，请在该元素上使用 ng-init。
例如<div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>
initModalFacultyInfo() 函数应该存在于控制器中。
于 2017-07-26T19:26:26.793 回答
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()">
于 2018-09-11T18:06:28.210 回答
-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);
于 2016-03-25T05:22:27.687 回答