Angularjs 在控制器中执行任何一个函数都会执行整个控制器函数_Angularjs_Web_Single Page Application_Ngroute_Angularjs Ng Route

Angularjs 在控制器中执行任何一个函数都会执行整个控制器函数

angularjs web

Angularjs 在控制器中执行任何一个函数都会执行整个控制器函数,angularjs,web,single-page-application,ngroute,angularjs-ng-route,Angularjs,Web,Single Page Application,Ngroute,Angularjs Ng Route,我是个新手。我使用的是一个控制器，最初使用init函数加载页面。我在html中有一个元素可以激活incrementPage函数。当我激活函数时，init函数再次执行，我得到相同的结果，而不是下一页。我如何解决这个问题 myApp.controller('MusicController', ['$scope', '$resource', function($scope, $resource){ var vm = $scope; init(); function

我是个新手。我使用的是一个控制器，最初使用init函数加载页面。我在html中有一个元素可以激活incrementPage函数。当我激活函数时，init函数再次执行，我得到相同的结果，而不是下一页。我如何解决这个问题

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);
      };
    }]);

此外，我正在使用ngRoute和两个不同的控制器

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

当我点击

而不是进入流派视图时，它会让我回到第一个

MusicController

控制器内的同一个listMusic视图。在这里做什么

    <!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>


音乐
音乐曲目

在控制器中，将其更改为：

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

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

当控制器初始化时，它将被调用一次。另外，我认为你的链接是不正确的，正如georgeawg指出的，但我对ngRoute不太熟悉，我已经使用uiRouter多年了，它应该是#/类型

还有一件事，虽然这与您的问题无关，但在init（）函数中，您有一个对db的调用，我怀疑它将是异步的，您可能应该在ngRoute中使用resolve，并将其注入控制器中，以便最初解决它：

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

然后，控制器可以使用“数据”作为呼叫结果：

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

您的html是什么？如何知道

init（）

再次运行？在我看来，您只是没有等待

$resource

调用的异步回调。我在init中添加了一个console.log，按下下一页按钮显示init中的。的可能重复。