在Angular UI路由器中，對於嵌套狀態，相應的模板是不是呈現？

Question

我想顯示選項卡（配置文件+設置），如下圖所示，但是當我點擊任何選項卡時，相應的模板未加載。在customerinfo.view.html我試圖改變<div ui-view="{{tab.view}}"></div>爲<div ui-view></div>它導致我無限的消化週期。

我能夠更改URL，第一時間時，我們打http://localhost:3000/home/#/updatecustomer/3/以下時打開的網址，當點擊個人資料，網址變更爲http://localhost:3000/home/#/updatecustomer/3/profile，但相應的模板（profile.html）不加載，同樣是發生了setting

我經過這個stackoverflow問題，但沒有任何幫助

模塊定義

個

(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

輪廓

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

設置

Answer 1

編輯：

1）第一件事 - 你的網址的命名。而不是http://localhost:3000/home/#/updatecustomer/3/的網址應該是http://localhost:3000/#/updatecustomer/3/

2）你希望標籤是你的家庭狀態的孩子。通過設置abstract: true來完成此操作。

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

3）您的路線的網址必須以/開頭。

.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）考慮使用ui-sref指令瀏覽狀態。

喜歡的東西：

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

相關：

what is the purpose of use abstract state?

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