Controller not registering when using nested view

Question

My app was working fine until I changed routing from ngRoute to ui-Router so I could use power of views within views. Now the controllers of the views are not being registered. My folder structure is like this:

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...
  }
})()

I am not sure why the controller is not being registered. The controller file is loaded when I check Networks in Developers Tools but I get Error: [$controller:ctrlreg] on all controllers. Thank You :)

Shahzad · Accepted Answer · 2017-03-16 11:17:21Z

1

You dont need ng-controller="FoodCategoriesController". Remove it.

answered Mar 16, 2017 at 11:17

Shahzad

1,7131 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bijay Timilsina Over a year ago

you're right!! i had already defined my controller for the template in app.route.js file. silly mistake . thank you :D

Shahzad Over a year ago

Welcome. :) Please mark as answer if it solved your issue

Collectives™ on Stack Overflow

Controller not registering when using nested view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related