AngularJs event to call after content is loaded

I have a function which I want to call after page content is loaded. I read about $viewContentLoaded and it doesn't work for me. I am looking for something like

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

Above call doesn't work for me in AngularJs controller.

标签： angularjs events loaded

14条回答

ら面具成の殇う

2楼-- · 2019-01-01 10:43

I had to implement this logic while handling with google charts. what i did was that at the end of my html inside controller definition i added.

  <body>
         -- some html here -- 
--and at the end or where ever you want --
          <div ng-init="FunCall()"></div>
    </body>

and in that function simply call your logic.

$scope.FunCall = function () {
        alert("Called");
}

0人赞添加讨论(0) 举报

千与千寻千般痛.

3楼-- · 2019-01-01 10:44

Running after the page load should partially be satisfied by setting an event listener to the window load event

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

Inside the module.run(function()...) of angular you will have all access to the module structure and dependencies.

You can broadcast and emit events for communications bridges.

For example:

module set onload event and build logic
module broadcast event to controllers when logic required it
controllers will listen and execute their own logic based on module onload processes.

0人赞添加讨论(0) 举报

梦该遗忘

4楼-- · 2019-01-01 10:48

According to documentation of $viewContentLoaded, it supposed to work

Emitted every time the ngView content is reloaded.

$viewContentLoaded event is emitted that means to receive this event you need a parent controller like

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

From MainCtrl you can listen the event

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

Check the Demo

0人赞添加讨论(0) 举报

情到深处是孤独

5楼-- · 2019-01-01 10:48

fixed - 2015.06.09

Use a directive and the angular element ready method like so:

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>

or for those using controller-as syntax...

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

The benefit of this is that you can be as broad or granular w/ your UI as you like and you are removing DOM logic from your controllers. I would argue this is the recommended Angular way.

You may need to prioritize this directive in case you have other directives operating on the same node.

0人赞添加讨论(0) 举报

余生请多指教

6楼-- · 2019-01-01 10:48

If you want certain element to completely loaded, Use ng-init on that element .

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

the initModalFacultyInfo() function should exist in the controller.

0人赞添加讨论(0) 举报

春风洒进眼中

7楼-- · 2019-01-01 10:50

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

}] );

Above method worked for me

0人赞添加讨论(0) 举报

1 2 3 下一页