How to execute AngularJS controller function on page load

Question

Currently I have an Angular js page that allows searching and displays results  User clicks on a search result  then clicks back button  I want the search results to be displayed again but I can t work out how to trigger the search to execute   Here s the detail    My Angular js page is a search page  with a search field and a search button  The user can manually type in a query and press a button and and ajax query is fired and the results are displayed   I update the URL with the search term  That all works fine  User clicks on a result of the search and is taken to a different page - that works fine too   User clicks back button  and goes back to my angular search page  and the correct URL is displayed  including the search term  All works fine  I have bound the search field value to the search term in the URL  so it contains the expected search term  All works fine    How do I get the search function to execute again without the user having to press the  search button   If it was jquery then I would execute a function in the documentready function  I can t see the Angular js equivalent

User · Answer

Yet another alternative if you have a controller just specific to that page    function          code to run

User · Answer

You can do this if you want to watch the viewContentLoaded DOM object to change and then do something  using  scope  on works too but differently especially when you have one page mode on your routing       scope  watch   viewContentLoaded   function           do something

User · Answer

Dimitri s Mark s solution didn t work for me but using the  timeout function seems to work well to ensure your code only runs after the markup is rendered     Your controller  including  timeout  var  scope init   function       your code     timeout  scope init    Hope it helps

User · Answer

I could never get  viewContentLoaded to work for me  and ng-init should really only be used in an ng-repeat  according to the documentation   and also calling a function directly in a controller can cause errors if the code relies on an element that hasn t been defined yet    This is what I do and it works for me    scope  on   routeChangeSuccess   function           do something       Unless you re using ui-router  Then it s    scope  on   stateChangeSuccess   function           do something

User · Answer

I had the same problem and only this solution worked for me  it runs a function after a complete DOM has been loaded   I use this for scroll to anchor after page has been loaded   angular element window document body  ready function                                  Your function that runs after all DOM is loaded

User · Answer

Found Dmitry Evseev answer quite useful   Case 1   Using angularJs alone  To execute a method on page load  you can use ng-init in the view and declare init method in controller  having said that use of heavier function is not recommended  as per the angular Docs on ng-init      This directive can be abused to add unnecessary amounts of logic into your templates  There are only a few appropriate uses of ngInit  such as for aliasing special properties of ngRepeat  as seen in the demo below  and for injecting data via server side scripting  Besides these few cases  you should use controllers rather than ngInit to initialize values on a scope    HTML    lt div ng-controller  searchController    gt       lt  -- renaming view code here  including the search box and the buttons -- gt   lt  div gt    Controller   app controller  SearchCtrl   function         var doSearch   function keyword             Search code here            doSearch  routeParams searchKeyword        Warning   Do not use this controller for another view meant for a different intention as it will cause the search method be executed there too   Case 2   Using Ionic  The above code will work  just make sure the view cache is disabled in the route js as   route js   state  app         url               search       cache           false    disable caching of the view here     templateUrl      templates search html          controller       SearchCtrl         Hope this helps

User · Answer

Another alternative   var myInit   function                   angular element document  ready myInit      via https   stackoverflow com a 30258904 148412

User · Answer

You can save the search results in a common service which can use from anywhere and doesn t clear when navigate to another page  and then you can set the search results with the saved data for the click of back button  function search searchTerm           retrieve the data here      RetrievedData   CallService        CommonFunctionalityService saveSerachResults RetrievedData        For your backbutton  function Backbutton         RetrievedData   CommonFunctionalityService retrieveResults

User · Answer

call initial methods inside self initialize function    function initController             do your initialize here

User · Answer

When using  routeProvider you can resolve on  state and bootstrap your service  This is to say  you are going to load Controller and View  only after resolve your Service   ui-routes    state  nn             url    nn           templateUrl   views home n html           controller   nnCtrl           resolve              initialised  function  ourBootstrapService   q                 var deferred    q defer                 ourBootstrapService init   then function initialised                  deferred resolve initialised                               return deferred promise                                   Service  function ourBootstrapService       function init            this is what we need

User · Answer

angular element document  ready function              your code here

User · Answer

Try this    scope  on   viewContentLoaded   function           call it here

User · Answer

On the one hand as  Mark-Rajcok said you can just get away with private inner function      at the bottom of your controller var init   function            check if there is query in url       and fire search in case its value is not empty       and fire it after definition init      Also you can take a look at ng-init directive  Implementation will be much like      register controller in html  lt div data-ng-controller  myCtrl  data-ng-init  init    gt  lt  div gt      in controller  scope init   function             check if there is query in url        and fire search in case its value is not empty      But take care about it as angular documentation implies  since v1 2  to NOT use ng-init for that  However imo it depends on architecture of your app   I used ng-init when I wanted to pass a value from back-end into angular app    lt div data-ng-controller  myCtrl  data-ng-init  init   some backend value     gt  lt  div gt

User · Answer

You can use angular s  window object     window onload   function e        your magic here

[angularjs] How to execute AngularJS controller function on page load?

Examples related to angularjs

Examples related to onload