在控制器中执行任何一个功能都会执行整个控制器功能答案

【问题标题】：Executing any one function in controller executes the entire controller function在控制器中执行任何一个功能都会执行整个控制器功能
【发布时间】：2017-10-12 22:29:53
【问题描述】：

我是 Angular 的新手。我正在使用控制器，并且最初使用 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;
      })();
    }]);

当我单击 <a href="#genres">Genres</a> 而不是将我带到流派视图时，它让我回到第一个 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>

【问题讨论】：

你的 html 是什么？
你怎么知道init()又开始运行了？在我看来，您只是没有等待 $resource 调用的异步回调。
我在 init 中添加了一个 console.log 并按下 Next Page 按钮显示在 init 中。
angularjs 1.6.0 (latest now) routes not working 可能重复。

标签： angularjs web single-page-application ngroute angularjs-ng-route

【解决方案1】：

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

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

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

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

另一件事虽然这与您的问题无关，但在您的 init() 函数中，您调用了您的数据库，我怀疑这将是异步的，您可能应该在 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)

【讨论】：