2

I've a very strange problem, it apparently seems that simple views template are preventing a controller to be executed, I can't understand why. I've built a simple plunker Code is here:

angular.module('plunker', ["ui.router"])
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise("/nested");
    $stateProvider
      .state('nested', {
        url: '/nested',
        controller: function($scope) {
          $scope.sayHi = 'Hi';
          this.sayHello = 'Hello';
        },
        controllerAs: 'dog',
        //If I comment the "views" section, controller runs correctly
        views: {
          'main': {
            template: 'MainContent'
          },
          'secondary': {
            template: 'SecondaryContent'
          }
        }
      })
    $locationProvider.html5Mode(false).hashPrefix('!');
  })

html:

<div ui-view>
  <h1>{{dog.sayHello}}</h1>
  <h1>{{sayHi}}</h1>
  <p>Why no "hello" or "Hi" over here?</p>
  <div ui-view="main"></div>
  <div ui-view="secondary"></div>
</div>

If I comment out the "views" section in the state definition, controller runs correctly.

[edit] Thanks to Radim, I resolved moving the controller definition in the views section: 

                         views:{
                          '':{
                              controller: function ($scope) {
                                  this.page = 'ten';
                              },
                              controllerAs:'dog'
                          },
                          'main@nested':{
                              template:'MainContent'
                          },
                          'secondary@nested':{
                              template:'SecondaryContent'
                          }
                      }
Gaetano L
  • 85
  • 6

1 Answers1

1

Check:

The controller always belongs to view, not to state.

There is an updated plunker

.state('nested', {
    url: '/nested',
    //controller: function($scope) {
    //  $scope.sayHi = 'Hi';
    //  this.sayHello = 'Hello';
    //},
    //controllerAs: 'dog',
    //If I comment the "views" section, controller runs correctly
    views: {
      'main': {
        //template: 'MainContent', - let's use view, to consume dog.sayHello
        templateUrl: 'view2.html',
        controller: function($scope) {
          $scope.sayHi = 'Hi';
          this.sayHello = 'Hello';
        },
        controllerAs: 'dog',
      },
      'secondary': {
        template: 'SecondaryContent',
        controller: ...
      }
    }

check the updated plunekr

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Good. Glad to see that my solution is working for you. You can accept the answer – Radim Köhler Nov 02 '15 at 08:26
  • I'm sorry, at the moment I don't see any accept button, if I see it I'll click it for sure – Gaetano L Nov 02 '15 at 08:58
  • If you do not mind, I suggest to go through this very short and very informative tour http://stackoverflow.com/tour... it is really good to know how it works here. And if you have some spare time, this is also nice reading: http://stackoverflow.com/help. Good luck, sir ;) Enjoy SO – Radim Köhler Nov 02 '15 at 09:14