Question

我使用yeoman发生器创建了离子应用程序。我使用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（＆＃39; ionicApp＆＃39;）。控制器（＆＃39; MainCtrl＆＃39;，功能（$ scope）{...}）;

链接：

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

离子，分离的控制器，不工作

1 个答案: