Angular: Function not running after page load

Question

I have a webpage that runs well, but on a certain route, it would not load certain functions. For example, this is code:

myApp.controller('people', ['$scope', function($scope) {

    $scope.$watch('$viewContentLoaded', function(){
        console.log('la 1');

        $scope.allPeople = function() {
            // This does not run when refreshed at https://www.website.com/people
            console.log('la 2');
        }
    })
]);

This has the same behavior, la 1 works, not la 2:

myApp.controller('people', ['$scope', function($scope) {
    console.log('la 1');
    $scope.allPeople = function() {
        console.log('la 2');
    }
}]);

These are routes:

myApp.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: '../../templates/all.html',
        controller: 'all'
    })
    .when('/people', {
        templateUrl: '../../templates/people.html',
        controller: 'people'
    })
});

When I load https://www.website.com, and navigate to People tab, it loads list of people. But, when I load the page WHILE in the People tab, the page would load, but without the list: I see la 1 printed, not la 2.

How can I run the allPeople when refreshed from /people?

what route module are you using ? show us how you set up the routes. — eran otzap
– eran otzap, Commented Jun 5, 2017 at 18:25

eran otzap · Accepted Answer · 2017-06-06 12:14:22Z

1

The reason is that you only declared the function but never execute it.

myApp.controller('people', ['$scope', function($scope) {

     $scope.allPeople = function() {          
          console.log('la 2');
     }

     $scope.$watch('$viewContentLoaded', function(){
         console.log('la 1');        
         $scope.allPeople();
     });   
]);

Additionally don't declare it every time you route. And don't forget to unregister the watch (thanks @NainishModi).

   myApp.controller('people', ['$scope', function($scope) {

     $scope.allPeople = $scope.allPeople || function() {          
          console.log('la 2');
     }

     var deReg = $scope.$watch('$viewContentLoaded', function(){
         console.log('la 1');        
         $scope.allPeople();
     })

      //deRegister watch
      $scope.$on('$destroy', deReg);
]);

edited Jun 6, 2017 at 12:14

answered Jun 5, 2017 at 18:30

eran otzap

12.6k21 gold badges88 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Function not running after page load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related