Angularjs on page load call function

Question

I am learning AngularJS  I have some article tag and on clicking on a button each article page is showed without any page refresh  This is one page website  What I want is that when article id  showSelector  is loaded I want to call myFunction   and in this function I want to show an alert  But the alert is not showing    How can I do that      lt article id  showSelector  class  panel  ng-controller  CinemaCtrl  onload  myFunction    gt         lt header gt           lt a ng-click  back    class  icon fa-arrow-circle-left  gt  lt  a gt  lt h2 gt Shows in   getSelectedCinema     lt  h2 gt                 lt  header gt         lt p gt          These shows are played in our single room theatre  Select one to reserce a ticket for it         lt  p gt         lt section gt           lt div class  row  gt             lt div class  4u  ng-repeat  show in shows  gt               lt div class  movieCard  gt                 lt a ng-click  selectShow show   gt  lt  a gt                 lt h3 gt   show nameOfShow   lt  h3 gt                 lt h4 gt   show timeOfShow   date  MMM d    lt  h4 gt                 lt h4 gt   show timeOfShow   date  HH mm    lt  h4 gt                 lt p gt Free seats    show reservations   freeSeatFilter   lt  p gt               lt  div gt             lt  div gt           lt  div gt         lt  section gt         lt script gt  function myFunction         alert  Page is loaded        lt  script gt       lt  article gt

User · Answer

var someVr  element 0  querySelector   showSelector            myfunction            alert  hi                         angular element someVr  ready function                 myfunction                      This will do the job

User · Answer

It s not the angular way  remove the function from html body and use it in controller  or use   angular element document  ready   More details are available here  https   stackoverflow com a 18646795 4301583

User · Answer

you can also use the below code   function activateController         console log  HELLO WORLD        scope  on   viewContentLoaded   function   evt  data        activateController

User · Answer

Instead of using onload  use Angular s ng-init    lt article id  showSelector  ng-controller  CinemaCtrl  ng-init  myFunction    gt   Note  This requires that myFunction is a property of the CinemaCtrl scope

User · Answer

lt section ng-controller  testController as ctrl  class  test cls   data-ng-init  fn load    gt    scope fn load   function        console log  page load

User · Answer

you can use it directly with  scope instance        scope init function                         console log  entered                data                   do whatever you want such as initialising scope variable                using  http instance etcc                        simple call init function on controller         scope init

User · Answer

You should call this function from the controller   angular module  App          controller  CinemaCtrl      scope   function  scope        myFunction             Even with normal javascript html your function won t run on page load as all your are doing is defining the function  you never call it   This is really nothing to do with angular  but since you re using angular the above would be the  angular way  to invoke the function   Obviously better still declare the function in the controller too   Edit  Actually I see your  onload  - that won t get called as angular injects the HTML into the DOM  The html is never  loaded   or the page is only loaded once

[javascript] Angularjs on page load call function

Examples related to javascript

Examples related to jquery

Examples related to angularjs