CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
user3171876
user3171876

Reputation: 43

AngularJS UI Router loads same controller several times

I'm having the following issue:

This is part of my $stateProvider:

angular.module('sampleApp').config(function ($stateProvider) {
$stateProvider
  .state('property', {
    url: '/property',
    templateUrl: 'app/property/property.html',
    controller: 'PropertyCtrl',
    authenticate: true,
    role: 'user'
  })
  .state('property.selected', {
    url : '/:propertyId',
    templateUrl : 'app/property/edit/edit-controller.html',
    controller : 'PropertyEditCtrl'
  })
  .state('property.selected.settings', {
    url : '/settings',
    templateUrl : 'app/property/partials/settings.html'
  })
  .state('property.selected.settings.general', {
    url : '/general',
    templateUrl : 'app/property/partials/settings-general/settings-general.html',
    controller : 'SettingsGeneralCtrl'
  })
  .state('property.selected.settings.property', {
    url : '/property',
    templateUrl : 'app/property/partials/settings-property/settings-property.html',
    controller : 'SettingsPropertyCtrl'
  })
  .state('property.selected.settings.extras', {
    url : '/extras',
    templateUrl : 'app/property/partials/settings-extras/settings-extras.html',
    controller : 'SettingsExtrasCtrl'
  })

What happens is that the controller loaded by any state beyond 'property.selected' load several times. In the case of 'property.selected.settings.general' SettingsGeneralCtrl loads 28 times. If i listen to an event in that controller and console.log something gets logged 28 times.

Any idea why? I'm totally lost.

Upvotes: 1

Views: 602

Answers (1)

user3171876
user3171876

Reputation: 43

The problem was i had a bunch of unnamed ui-views at that level. Since the controller is called by ui-view it loaded several times.

Te solution is to name the views and invoke them with ui-view="viewName".

Upvotes: 3

Related Questions