AngularJS UI路由器無法加載templateUrl

我有這樣的項目結構：AngularJS UI路由器無法加載templateUrl

的index.html

<html> 
    <head></head> 
    <body ng-app="myApp"> 
     <div ui-view=""></div> 
    </body> 
</html>

bread.html

<div class="col-md-12"> 
This is the bread view. 
    <div ui-view="filters"></div> 
    <div ui-view="tabledata"></div> 
    <div ui-view="graph"></div> 
</div>

麪包。 js

'use strict'; 

angular.module('myApp') 
.config(function ($stateProvider) { 
$stateProvider 
    .state('bread', { 
    url: '/bread', 
    views: { 
     '@': { 
     templateUrl: 'app/breadcrumbs/views/home.tpl.html', 
     }, 
     '[email protected]': { 
     templateUrl: 'app/breadcrumbs/views/home1.tpl.html', 
     }, 
    }, 
    controller: 'BreadCtrl' 
    }); 
});

作爲模板加載的html文件非常簡單。只包含段落標籤。

我試過使用嵌套視圖，但在ui-view =「filters」我無法加載模板。

來源

2015-12-15 swateek

基本上你應該把你bread.html在你的國家的基本視圖，然後加載從意見named-view，@代表這裏的基地佈局模板

.config(function ($stateProvider) { 
$stateProvider 
    .state('bread', { 
    url: '/bread', 
    views: { 
     '@': { 
     //I don't know the exact bread.html url, it can be different 
     templateUrl: 'bread.html', //base layout which will make named-view available 
     }, 
     '[email protected]': { 
     templateUrl: 'app/breadcrumbs/views/home1.tpl.html', 
     }, 
     '[email protected]': { 
     templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html', 
     }, 
     '[email protected]': { 
     templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html', 
     }, 
    }, 
    controller: 'BreadCtrl' 
    }); 
});

來源

2015-12-15 19:17:52

謝謝，這個作品！ – swateek

@swateek很高興爲您提供幫助......謝謝:) –

還有一個問題，是因爲我沒有加載所有的ui-views，我的頁面變得空白了嗎？ – swateek

如果你想使用你必須命名視圖用ui-view指令指定名稱。或者只是將它作爲'乾淨'指令沒有值：<div ui-view></div>

如果你想使用嵌套視圖，你需要創建父視圖和子視圖。在這種情況下，首先在主ui-view指令中加載父視圖，然後在父視圖中加載子視圖。所以你的父視圖裏面也必須包含ui-view指令。在這種情況下，你的狀態應該是水木清華這樣的：

在這種情況下產生的URL將被protocol://host/parentSegment/childSegment

你可以跳過子段URL剛剛離開url參數爲空兒：

.state("parent.child", { url: "/", templateUrl: "path to your child view" })

在這種情況下，你將有protocol://host/parentSegment

如您所見，嵌套視圖的名稱中包含'前綴'，與父視圖名稱相同，並且名稱的子部分以點（。）附加到其後面鏈接，關於命名視圖的更多信息，您應該訪問this鏈接

來源

2015-12-15 19:32:30 Andrew

謝謝安德魯，但基礎index.html還有其他依賴關係，所以我不確定是否可以將它從空字符串移動到無名稱。 – swateek

這只是例子。指定兒童狀態的網址或將它留空 - 你的選擇）它不是你必須/必須/必須在你的應用程序中有的東西 – Andrew

謝謝，我會從這裏玩弄。 – swateek

AngularJS UI路由器無法加載templateUrl

回答

相關問題