javascript - ionic ，分离的 Controller ，不工作

Question

我使用 yeoman 生成器创建了 ionic 应用程序。我使用 gruntserve 启动了应用程序，并添加了一个名为 settings 的新 Controller 。

Index.html:

<script src="scripts/controllers/settings.js"></script>

设置js:

'use strict';

/**
 * @ngdoc function
 * @name musicPadApp.controller:SettingsCtrl
 * @description
 * # SettingsCtrl
 * Controller of the musicPadApp
 */
angular.module('musicPadApp')
  .controller('SettingsCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

app.js:

   .state('app.settings', {
          url: '/settings',
          views: {
              'menuContent' :{
                  templateUrl: 'templates/settings.html',
                  controller: 'SettingsCtrl'
              }
          }
      })

但是在设置页面上我总是收到以下错误:

Error: [ng:areq] Argument 'SettingsCtrl' is not a function, got undefined

我做错了什么以及如何解决它？

所有 Controller 的默认文件如下:

'use strict';
angular.module('MusicPad.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  },

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  }
})

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
});

感谢您的帮助。

Answer 1

我是这样解决的:

每个 Controller 都可以位于自己的文件中，并且可以像这样声明它。

angular.module('ionicApp').controller('MainCtrl', function ($scope) { ... });

链接:

http://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554