離子，分離的控制器，不起作用

Question

我使用yeoman生成器創建了ionic應用。 我使用grunt serve啟動了應用程序，並添加了一個名為settings的新控制器。

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

我在做什么錯以及如何解決？

所有控制器的默認文件如下：

'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

我通過這種方式解決了：

您的每個控制器都可以位於其自己的文件中，並且您可以這樣聲明它。

angular.module（'ionicApp'）。controller（'MainCtrl'，函數（$ scope）{...}）;

鏈接：

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