javascript - Ionic 中单独文件中的 Controller 并包含顺序

Question

我开始编写一个 Ionic 应用程序，并开始编写我的 View 和 Controller 。我想使用标签布局。

为了清楚起见，我想将我的 Controller 分开放在不同的文件中。

我的 Controller -文件夹:

• controller.js
• main.js
• tabs.js

controller.js 包含:

angular.module('myApp.controllers', []);

main.js 包含:

angular.module('myApp.controllers', ['myApp.services','ionic'])
  .controller('MainCtrl', function ($scope) {
    $scope.name = "Test";
  });

tabs.js 包含:

angular.module('myApp.controllers', ['myApp.services','ionic'])
  .controller('TabsCtrl', function ($scope) {

  });

在 app.js 中我指定了我的路由:

.state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'app/templates/tabs.html',
    controller: 'TabsCtrl'
  })


  .state('tab.main', {
    url: '/main',
    views: {
      'tab-main': {
        templateUrl: 'app/templates/main.html',
        controller: 'MainCtrl'
      }
    }
  })

最后在我的 index.html 中，我在标题中包含了所有使用的文件:

    <script src="app/app.js"></script>
    <!-- Controller-Definition -->
    <script src="app/controller/controller.js"></script>
    <script src="app/controller/tabs.js"></script>
    <script src="app/controller/main.js"></script>

我的问题是在浏览器中出现错误:

Argument 'TabsCtrl' is not a function, got undefined

我不知道为什么它不起作用!

当我更改 index.html 文件中 tabs.js 和 main.js 的顺序时我得到:

Argument 'MainCtrl' is not a function, got undefined

有人可以帮我解决这个问题吗？它可能是一些小而简单的东西，但我不明白:-)

Answer 1

您覆盖每个文件中的“myApp.controllers”模块。尝试这个: Controller .js:

angular.module('myApp.controllers', ['myApp.services','ionic']);

主要.js:

angular.module('myApp.controllers')
  .controller('MainCtrl', function ($scope) {
    $scope.name = "Test";
  });

tabs.js

angular.module('myApp.controllers')
  .controller('TabsCtrl', function ($scope) {

  });