Question

我开始编写一个Ionic应用程序并开始编写我的视图和控制器。我想使用制表符布局。

为了清楚起见，我想将我的控制器分成不同的文件。

我的控制器 - 文件夹：

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>

我的问题是在浏览器中我收到错误：

参数＆＃39; TabsCtrl＆＃39;不是一个功能，未定义

并且我不知道为什么它不起作用！

当我更改index.html文件中tabs.js和main.js的顺序时我明白了：

Argument＆＃39; MainCtrl＆＃39;不是一个功能，未定义

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

Answer 1

您在每个文件中覆盖'myApp.controllers'模块。试试这个： controller.js：

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

main.js：

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

tabs.js

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

  });

控制器在Ionic中的单独文件中包含订单

1 个答案: