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?

 <article id="showSelector" class="panel" ng-controller="CinemaCtrl" onload="myFunction()">
      <header>
        <a ng-click="back()" class="icon fa-arrow-circle-left"></a><h2>Shows in {{getSelectedCinema()}}</h2>        
      </header>
      <p>
        These shows are played in our single room theatre. Select one to reserce a ticket for it.
      </p>
      <section>
        <div class="row">
          <div class="4u" ng-repeat="show in shows">
            <div class="movieCard">
              <a ng-click="selectShow(show)"></a>
              <h3>{{show.nameOfShow}}</h3>
              <h4>{{show.timeOfShow | date:'MMM d'}}</h4>
              <h4>{{show.timeOfShow | date:'HH:mm'}}</h4>
              <p>Free seats: {{show.reservations | freeSeatFilter}}</p>
            </div>
          </div>
        </div>
      </section>
      <script>
function myFunction() {
    alert("Page is loaded");
};
</script>
    </article>

Why not put the logic for `myFuntcion` inside CinemaCtrl? It will get run whenever the view you have above is rendered. — Brocco, Nov 28 '14 at 19:23
possible duplicate of [execute function on page load?](http://stackoverflow.com/questions/15458609/execute-function-on-page-load) — Damjan Pavlica, Aug 26 '15 at 11:51

score 13 · Accepted Answer · answered Nov 28 '14 at 19:22

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).

Scott McDermid · Answer 2 · 2014-11-28T21:51:58.053

11

Instead of using onload, use Angular's ng-init.

<article id="showSelector" ng-controller="CinemaCtrl" ng-init="myFunction()">

Note: This requires that myFunction is a property of the CinemaCtrl scope.

edited Nov 28 '14 at 21:51

answered Nov 28 '14 at 19:26

Scott McDermid

520
3
7

score 3 · Answer 3 · answered Jan 26 '16 at 06:54

3

<section ng-controller="testController as ctrl" class="test_cls"  data-ng-init="fn_load()">

$scope.fn_load = function () {
  console.log("page load")
};

answered Jan 26 '16 at 06:54

Jijo Paulose

1,896
18
20

score 2 · Answer 4 · edited May 23 '17 at 11:54

2

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

edited May 23 '17 at 11:54

Community

1
1

answered Nov 28 '14 at 21:03

Антон Брагин

412
3
6

score 0 · Answer 5 · answered May 11 '15 at 05:21

0

you can also use the below code.

function activateController(){
     console.log('HELLO WORLD');
}

$scope.$on('$viewContentLoaded', function ($evt, data) {
    activateController();
});

answered May 11 '15 at 05:21

Ravi Mittal

1,947
4
22
37

score 0 · Answer 6 · answered Dec 27 '16 at 11:11

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();

Ashish Yadav · Answer 7 · 2016-02-25T08:02:22.607

-3

    var someVr= element[0].querySelector('#showSelector');
        myfunction(){
        alert("hi");
        }   
        angular.element(someVr).ready(function () {
           myfunction();
            });

This will do the job.

edited Feb 25 '16 at 08:02

answered Feb 25 '16 at 03:59

Ashish Yadav

11
5

Angularjs on page load call function

7 Answers7

Linked