CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
shylent
shylent

Reputation: 10086

Child state controller is never executed

I was trying to wrap my head around ui-router and I've tried to implement the following logic:

However, the child state's "controller" function is not executed. I bet it's something really obvious.

Here's the js (I also have it on plunkr with the accompanying templates).

angular.module('uiproblem', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
         function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/items');
    $stateProvider
    .state('items', {
        url: '/items',
        resolve: {
            items: function($q, $timeout){
              var deferred = $q.defer();
              $timeout(function() {
                deferred.resolve([5, 3, 6]);
              }, 1000);
              return deferred.promise;
            }
        },
        controller: function($state, items) {
            // We get to this point successfully
            console.log(items);
            if (items.length) {
                // Attempt to transfer to child state
                return $state.go('items.current', {id: items[0]});
            }
        }
    })
    .state('items.current', {
        url: '/:id',
        templateUrl: 'item.html',
        controller: function($scope, items) {
            // This is never reached, but the I can see the partial being
            // loaded.
            console.log(items);
            // I expect "items" to reflect to value, to which the "items"
            // promise resolved during processing of parent state.
            $scope.items = items;
        }
    });
}]);

Plunk: http://plnkr.co/edit/K2uiRKFqe2u5kbtTKTOH

Upvotes: 1

Views: 325

Answers (1)

Nate Abele
Nate Abele

Reputation: 5770

Add this to your items state:

template: "<ui-view></ui-view>",

States in UI-Router are hierarchical, and so are their views. As items.current is a child of items, so is it's template. Therefore, the child template expects to have a parent ui-view to load into.

If you prefer to have the child view replace the parent view, change the config for items.current to the following:

{
  url: '/:id',
  views: {
    "@": {
      templateUrl: 'item.html',
      controller: function($scope, items) {
          // ...
      }
    }
  }
}

Upvotes: 5

Related Questions