UI路由器沒有編譯深層次的模板

我遇到了使用UI-Router構建嵌套模板的問題。看來它無法加載或編譯第三級（或更深）的模板。UI路由器沒有編譯深層次的模板

我已經創建了一個簡化的例子的plunker，這是代碼：

angular.module('plunker', ["ui.router"]) 
.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
    $urlRouterProvider.otherwise("/"); 
    $locationProvider.html5Mode(false).hashPrefix('!'); 
    $stateProvider 
    .state('home', { 
     url: "/", 
     controller: 'MainCtrl', 
     views: { 
      'main': { 
       template: 'Main content' 
      }, 
      'secondary': { 
       templateUrl: "view2.html", 
       views: { 
        'hot': { 
         template: 'hot content' 
        }, 
        'cold': { 
         template: 'cold content' 
        } 
       } 
      } 
     } 
    }) 

}) 
.controller('MainCtrl', function($scope) { 
    $scope.sayHello = 'Hello'; 
})

其中HTML是

<body class='container' ng-controller='MainCtrl'> 
    <h2>Nested template proof</h2> 
    <div ui-view> 
     <p>{{sayHello}}</p> 
     <div ui-view="main"></div> 
     <div ui-view="secondary"></div> 
    </div> 
</body>

和view2.html是

<div> 
    <p>view2 loaded</p> 
    <div ui-view="hot"></div> 
    <div ui-view="cold"></div> 
</div>

任何人都可以告訴我我做錯了什麼？「熱」和「冷」部分沒有被編譯。

來源

2015-10-31 Gaetano L

有一個updated and working example

的一個狀態裏面視圖的嵌套必須以不同方式進行。我們需要絕對的命名 - 所以這將是語法：

.state('home', { 
    url: "/", 
    controller: 'MainCtrl', 
    views: { 
     'main': { 
      template: 'Main content' 
     }, 
     'secondary': { 
      templateUrl: "view2.html", 
      //views: {} 
     }, 
     '[email protected]': { 
      template: 'hot content' 
     }, 
     '[email protected]': { 
      template: 'cold content' 
     } 
    } 
})

這是absolute view naming，例如討論在這裏：

來源

2015-10-31 09:33:16

非常感謝，儘管這意味着在更復雜的情況下，我不能與子模板，模板的視圖，而不添加準確瞭解該模板包含的內容，並且無需在父上下文中解壓其內容。它對我的眼睛看起來不太好。 –

我們可以做很多。這些鏈接顯示了關於佈局http://stackoverflow.com/q/28800644/1679310的一些想法。希望能幫助到你。享受強大的UI路由器 –

UI路由器沒有編譯深層次的模板

回答

相關問題