AngularJs event to call after content is loaded

Question

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

User · Answer

I found that if you have nested views -  viewContentLoaded gets triggered for every of the nested views  I ve created this workaround to find the final  viewContentLoaded  Seems to work alright for setting  window prerenderReady as required by Prerender  goes into  run   in the main 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  gt  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

User · Answer

you can call javascript version of onload event in angular js  this ng-load event can be applied to any dom element like div  span  body  iframe  img etc  following is the link to add ng-load in your existing project   download ng-load for angular js  Following is example for iframe  once it is loaded  testCallbackFunction  will be called in controller  EXAMPLE  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     lt div ng-app  myApp  ng-controller  myCtrl  gt          lt iframe src  test html  ng-load callback  testCallbackFunction    gt       lt  div gt

User · Answer

If you want certain element to completely loaded  Use ng-init on that element    e g   lt div class  modal fade  id  modalFacultyInfo  role  dialog  ng-init  initModalFacultyInfo    gt     lt  div gt   the initModalFacultyInfo   function should exist in the controller

User · Answer

var myTestApp   angular module  myTestApp         myTestApp controller  myTestController   function  scope   window     window onload   function      alert  is called on page load

User · Answer

The solution that work for me is the following  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                                                                                                            Controller code is the following   scope crearTooltip   function               data-toggle  popover     popover        Html code is the following   lt tr ng-repeat  item in  data  on-finish-render  crearTooltip    gt

User · Answer

You can directly call it by adding   YourFunction     after HTML element   Here is a Plunker Link

User · Answer

Angular  lt  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

User · Answer

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      lt body gt           -- some html here --  --and at the end or where ever you want --            lt div ng-init  FunCall    gt  lt  div gt       lt  body gt    and in that function simply call your logic    scope FunCall   function              alert  Called

User · Answer

I use setInterval to wait for the content loaded  I hope this can help you to solve that problem   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

User · Answer

I was using   myFunction     in the template but then found another way here using  timeout inside the controller  Thought I d share it  works great for me   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

User · Answer

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   lt div ng-controller  MainCtrl  gt     lt div ng-view gt  lt  div gt   lt  div gt    From MainCtrl you can listen the event     scope  on   viewContentLoaded   function          Here your view content is fully loaded            Check the Demo

User · Answer

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  lt div elem-ready  quot someMethod   quot  gt  lt  div gt   or for those using controller-as syntax     lt div elem-ready  quot vm someMethod   quot  gt  lt  div gt   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

User · Answer

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       gt  Called on View Load                                return           link  link                 Above method worked for me

User · Answer

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

User · Answer

If you re getting a  digest already in progress error  this might help   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

[angularjs] AngularJs event to call after content is loaded

Examples related to angularjs

Examples related to events

Examples related to loaded