AngularJS UI Router loads same controller several times

Question

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.

do you have a reference of the controller in you view using ng-controller? — pedrommuller
– pedrommuller, Commented Jan 7, 2015 at 16:00
@jack.the.ripper I don't have any reference outside that in the state. — user3171876
– user3171876, Commented Jan 7, 2015 at 17:11

user3171876 · Accepted Answer · 2015-01-07 21:53:12Z

3

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".

answered Jan 7, 2015 at 21:53

user3171876

435 bronze badges

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

1 Comment

xtrinch Over a year ago

How did you manage to load the partials into settings.html? I get empty pages if I declare a default ui-view="defaultName"

Collectives™ on Stack Overflow

AngularJS UI Router loads same controller several times

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related