在加载内容之后调用AngularJs事件

我有一个函数，我想调用页面内容后加载。 我读了$ viewContentLoaded，它不适合我。 我正在寻找类似的东西 

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

上面的调用在AngularJs控制器中不适用于我。

根据$ 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

使用一个指令和angular度元素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>

这样做的好处是，您可以像您喜欢的那样使用广泛或粒度更细的用户界面，并且可以从控制器中删除DOM逻辑。 我会认为这是推荐的Angular方式。

如果您有其他指令在同一个节点上操作，则可能需要优先考虑此指令。

angular度<1.6.X 

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

Angular> = 1.6.X 

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

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

这是一个Plunker Link 。

我必须在处理谷歌图表时实现这个逻辑。 我所做的是在我的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); } }) } }

我在模板中使用了{{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(); }); }]);

在页面加载之后运行应该部分地通过将事件监听器设置为窗口加载事件来满足 

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

在module.run(function()...) ，您将拥有对模块结构和依赖关系的所有访问权限。

您可以broadcast和发送通讯桥梁的事件。

例如：

  • 模块设置onload事件和构build逻辑
  • 模块广播事件到控制器时，逻辑需要它
  • 控制器将根据模块载入过程来侦听和执行自己的逻辑。 
 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 }; }] );

以上方法为我工作

如果你想要某个元素完全加载，请使用该元素的ng-init。

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

initModalFacultyInfo（）函数应该存在于控制器中。

我发现，如果你有嵌套视图 – $ viewContentLoaded获取触发每个嵌套的意见。 我已经创build了这个解决方法来find最后的$ 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 ++; });

我使用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);
Interesting Posts