In Angular ui-router, for nested state, corresponding template is not rendering?

Question

I want to show tab(profile+setting), like the following image, but when i click on any tabs, corresponding template is not loading. In customerinfo.view.html I tried to change <div ui-view="{{tab.view}}"></div> to <div ui-view></div> it causing me infinite digest cycle.

I am able to change the url, When first time we hit the url http://localhost:3000/home/#/updatecustomer/3/ following time opens, when click on profile, url change to http://localhost:3000/home/#/updatecustomer/3/profile, but corresponding template(profile.html) is not loading, same is happening for setting

I go through this stackoverflow question, but no help

Module definition

(function() {
    'use strict';
    var app = angular.module('app', ['ui.router', 'ngCookies', 'ui.bootstrap']);
    app.config(function config($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            controller: 'HomeController',
            templateUrl: 'home/home.view.html',
        })

 .state('home.updatecustomer', {
     url: 'updatecustomer/:customerId/',
     controller: 'TabsDemoCtrl',
     templateUrl: 'addcustomer/customerinfo.view.html',
 })
 .state('home.updatecustomer.profile', {
     url: 'profile',
     controller: 'ProfileCtrl',
     templateUrl: 'addcustomer/profile.html',
 }))
 .state('home.updatecustomer.setting', {
            url: 'setting',
            controller: 'SettingCtrl',
            templateUrl: 'addcustomer/setting.html',
 })

customer.js

(function () {
    'use strict';
    var app = angular.module('app');
    app.controller('TabsDemoCtrl', TabsDemoCtrl);
    TabsDemoCtrl.$inject = ['$scope', '$state'];
    function TabsDemoCtrl($scope, $state){
        $scope.customer = 3;
        $scope.tabs = [
            { title:'profile', view:'profile', active:true },
            { title:'setting', view:'setting', active:false }
        ];
    }
})();

customerinfo.view.html

  <uib-tabset active="active">
      <uib-tab  ng-repeat="tab in tabs" heading="{{tab.title}}"  active="tab.active" disable="tab.disabled">
         <div ui-view="{{tab.view}}"></div>
      </uib-tab>
</uib-tabset>

profile.js

(function () {
    'use strict';
    var app = angular.module('app') ;
    app.controller('ProfileCtrl', ProfileCtrl);
    ProfileCtrl.$inject = ['$scope'];
    function ProfileCtrl($scope){
         $scope.profile="Profile 123";
    }
})() ;

profile.html

profile

Setting.js

(function () {
    'use strict';
    var app = angular.module('app') ;
    app.controller('SettingCtrl', SettingCtrl);
    SettingCtrl.$inject = ['$scope'];
    function SettingCtrl($scope){
        $scope.setting="setting 1213";
    }
})() ;

setting.html

setting

score 0 · Answer 1 · edited May 23 '17 at 12:00

Edit:

1) The first thing-- the naming of your urls. Instead of http://localhost:3000/home/#/updatecustomer/3/ the url should be http://localhost:3000/#/updatecustomer/3/

2) You want the tabs to be children of your home state. Do this by setting abstract: true.

  $stateProvider
    .state('home', {
        abstract: true,
        controller: 'HomeController',
        templateUrl: 'home/home.view.html'
    })

3) The url for your routes must begin with a /.

  .state('home.your-splash-view', {
    url: '/home',
    controller: 'HomeCtrl',
    templateUrl: 'home/splash.view.html'
  })
  .state('home.updatecustomer', {
     url: '/updatecustomer/:customerId/',
     controller: 'TabsDemoCtrl',
     templateUrl: 'addcustomer/customerinfo.view.html'
  })
  .state('home.updatecustomer.profile', {
     url: '/profile',
     controller: 'ProfileCtrl',
     templateUrl: 'addcustomer/profile.html'
  });

4) Consider navigating states with theui-sref directive.

Something like:

<uib-tab ui-sref='home.updatecustomer.profile'> ... </ui-tab>

Why give an "abstract: true" state a url?

edited... hopefully that puts you on the right direction – Wes Aspinall Aug 16 '16 at 19:06 — Wes Aspinall, Aug 16 '16 at 19:06
we cann't use `abstract:true`, because I need '/home' url – Guest Aug 17 '16 at 06:28 — Guest, Aug 17 '16 at 06:28

In Angular ui-router, for nested state, corresponding template is not rendering?

1 Answers1