UI路由器嵌套視圖

Question

我已經嘗試過沒有任何運氣的各種漫遊器。

我有這兩個UI-觀點：

<div ui-view class="expand"></div> //Inside index.html 

<div ui-view></div> //Inside home.html 

這是我的路由：

$stateProvider 
      .state('home', { 
       url: '/', 
       views: { 
        '@': { 
         templateUrl: 'app/components/home/home.html', 
         controller: 'HomeCtrl' 
        } 
       } 
      }) 
      .state('clients', { 
       url: '/clients', 
       views: { 
        '@home': { 
         templateUrl: 'app/components/clients/clients.html', 
         controller: 'ClientsCtrl' 
        } 
       }   
      }) 

我試圖把在視圖名稱，並呼籲他們以不同的方式，但客戶端。即使路由URL更改，html也不會顯示。

Answer 1

我並不完全熟悉$stateProvider所使用的視圖語法。我會給你兩個版本，第一個看起來與你的例子非常相似，第二個版本更符合最佳實踐。

$stateProvider 
     .state('base', { 
      abstract: true, 
      url: '', 
      templateUrl: 'views/base.html' 
     }) 
     .state('login', { 
      url: '/login', 
      parent: 'base', 
      templateUrl: 'views/login.html', 
      controller: 'LoginCtrl' 
     }) 
     .state('dashboard', { 
      url: '/dashboard', 
      parent: 'base', 
      templateUrl: 'views/dashboard.html' 
     }) 

最佳實踐版本：

(function() { 
'use strict'; 
angular 
    .module('app.core') 
    .config(stateConfig) 
    .run(errorHandler); 

stateConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider']; 
getZipCodes.$inject = ['googleMapService']; 
errorHandler.$inject = ['$rootScope', 'logger']; 

function stateConfig($stateProvider, $urlRouterProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider.state('core', { 
     url: '/', 
     templateUrl: 'app/core/core.html', 
     controller: 'CoreController', 
     controllerAs: 'vm', 
     resolve: { 
      getZipCodes : getZipCodes 
     } 
    }) 
} 

/** @desc: Ping the back-end for a JSON object that will be converted into an array of NYC zip codes */ 
function getZipCodes(googleMapService) { 
    return googleMapService.getZipCodes(); 
} 

/** @desc: $stateChangeError handler */ 
function errorHandler($rootScope, logger) { 
    $rootScope.$on('$stateChangeError', function (error, event) { 
     if (error) { logger.error('Error while changing states', error); } 
     if (event) { logger.error('The event that caused the error', event); } 
    }) 
} 
})();