使用嵌套视图

时间:2017-03-16 11:13:31

标签: javascript angularjs angular-ui-router

我的应用程序工作正常,直到我将路由从ngRoute更改为ui-Router,因此我可以在视图中使用视图功能。现在视图的控制器没有被注册。我的文件夹结构如下:

enter image description here

的index.html

<html ng-app="myApp">
  <body>
  
      <div ui-view></div>

      <script src="js/app.module.js"></script>
      <script src="js/components/foodCategories/foodCategoriesController.js"></script>
      <!-- other controllers -->
      <script src="js/app.route.js"></script>
  </body>
</html>

app.module.js

angular.module('myApp', ['ui.router'])

app.route.js

angular.module('myApp')
  .config(['$stateProvider', '$urlRouterProvider', statesManager])

function statesManager($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

  $stateProvider
    .state('profile', {
      url: '/profile',
      views: {
        '': {
          templateUrl: '/js/components/profile.html'
        },
        'foodCategories@profile': {
          templateUrl: '/js/components/foodCategories/foodCategories.html',
          controller: 'FoodCategoriesController'
        }
      }
    })
}

profile.html

<div ui-view="foodCategories"></div>

foodCategories.html

<div id="foodcategories" ng-controller="FoodCategoriesController">
<!-- other stuffs -->

foodCategoriesController.js

(function () {
  angular
    .module('myApp')
    .controller('FoodCategoriesController', controlFunc)

  function controlFunc ($scope) {
  ....my stuffs...
  }
})()

我不确定为什么控制器没有注册。当我在开发人员工具中检查网络时加载了控制器文件,但我得到所有控制器上的错误:[$ controller:ctrlreg]。 谢谢:)

1 个答案:

答案 0 :(得分:1)

你不需要ng-controller="FoodCategoriesController"。删除它。