Executing any one function in controller executes the entire controller function

Question

I am a newbie to Angular. I am using a controller and I am initially loading the page using the init function. I have an element on html that activates the incrementPage function. When I activate the function, the init function executes again and I get the same result instead of the next page. How do I solve this issue?

myApp.controller('MusicController', ['$scope',  '$resource', function($scope, $resource){
      var vm = $scope;
      init();
      function init(){
      vm.pgno = 1;
      music = $resource('http://104.197.128.152:8000/v1/tracks/', {"page": vm.pgno}).get({"page": vm.pgno});
      vm.tracks = music;
      }

      vm.incrementPage = function(){
        vm.pgno = vm.pgno + 1;
        console.log(vm.pgno);
        music = $resource('http://104.197.128.152:8000/v1/tracks/', {"page": vm.pgno}).get({"page": vm.pgno});
        vm.tracks = music;
        console.log(vm.pgno);
      };
    }]);

Also, I am using ngRoute and two different controllers.

    myApp.config(['$routeProvider', function($routeProvider) {                        
      $routeProvider                                                                
           .when('/', {                                            
             templateUrl: "views/listMusic.html",                                               
             controller:'MusicController',                                
            })
            .when('/genres', {                                            
             templateUrl: "views/genres.html",                                               
             controller:'MusicGenreController',                                
            })                                                                       
    }]);

    myApp.controller('MusicGenreController', ['$scope', 'tracklister', function($scope, tracklister) {
      var vm = $scope;
      var gpgno = 1;
      var incrementGPage = function(){
        gpgno += 1;
        gen = tracklister.genreList.get({'page': gpgno});
        vm.genres = gen;
      }
      (function(){
        gen = tracklister.genreList.get({'page': gpgno});
        vm.genres = gen;
      })();
    }]);

When I click the <a href="#genres">Genres</a> instead of taking me to the genres view it is getting me back to the same listMusic view inside the first MusicController controller. What to do here?

    <!DOCTYPE html>
    <html ng-app='ListTracksApp'>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script>
        <script src="appl.js"></script>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>Music</title>
      </head>
      <body>
        <h1>Music Tracks</h1>
        <a href="#genres">Genres</a>

        <div ng-view>


        </div>

      </body>
    </html>

How do you know `init()` is running again? It looks to me like you're just not waiting for the async callback for the `$resource` call. — Josiah Keller, May 13 '17 at 20:03
I added a console.log inside init and pressing the Next Page button shows inside init. — Naman, May 13 '17 at 20:05
Possible duplicate of [angularjs 1.6.0 (latest now) routes not working](http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working/41213016#41213016). — georgeawg, May 13 '17 at 21:34

score 0 · Answer 1 · edited May 14 '17 at 16:59

In your controller, change it to this:

myApp.controller('MusicController', ['$scope',  '$resource', function($scope, $resource) {
  var vm = $scope;

  function $onInit() {
    // the rest of your code

That'll get called once, when the controller initializes. Also I think your link is incorrect, as georgeawg pointed out but I'm not too familiar with ngRoute, I've used uiRouter for years, it should be #!/genres

One other thing although this isn't related to your question, in your init() function you have a call to your db, which I suspect is going to be async, you should probably use resolve in the ngRoute and inject it into the controller so it's initially resolved:

resolve: {
  data: function ($resource) {
    var url = 'http://104.197.128.152:8000/v1/tracks/';
    return $resource(url, {"page": 1}).get({"page": 1}).$promise;
  }
}

Then your controller can use 'data' as the result of the call:

myApp.controller('MusicController', ['$scope',  '$resource', 'data', function($scope, $resource, data)

Executing any one function in controller executes the entire controller function

1 Answers1