0
- 當我加載index.html頁面時，默認情況下，UI路由器正在加載home.html 點擊主頁數據的名稱後，我將list.html頁面顯示爲子模板。
- 根據選定的家庭數據，我從服務器獲取list.html的數據，但這裏是示例目的我沒有從服務器獲取數據我剛剛顯示了代碼的骨架，所以目前我只是從靜態數組中獲取數據。
現在，當你點擊家裏的數據，然後我加載第二個模板（list.html）作爲子模板在控制檯你會得到「listController裝」的消息，但現在，當你再次點擊名稱的任何名稱列主頁數據列，然後我的第二個模板不會重新渲染和測試目的，你可以檢查控制檯，你不會再次獲得控制檯消息。重新呈現相同的角模板
根據我的場景，當用戶點擊主頁數據的名稱列，然後選擇的名稱，我作爲參數傳遞給我的服務器，並根據我在第二個模板（list.html）顯示數據。此方案是爲第1次可以正常使用，如果我在主頁的名稱欄再次點擊，然後我的第二個模板不清爽/新數據
再次重裝的Index.html
<!DOCTYPE html>
<html>
<head>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="demoApp">
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
home.html的
<h2>Home Data</h2>
<table>
<thead>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in homeData">
<td ng-click="clickOfButton">{{ data.name }}</td>
<td>${{ data.price }}</td>
</tr>
</tbody>
</table>
<div ui-view></div>
list.html
<h2>List Data</h2>
<table>
<thead>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in listData">
<td>{{ data.name }}</td>
<td>${{ data.price }}</td>
</tr>
</tbody>
</table>
app.js
var demoApp = angular.module('demoApp', ["ui.router"]);
demoApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',
{
url: '/home',
templateUrl: 'home.html',
controller: 'homeController'
})
.state('home.list',
{
url: '/:list',
templateUrl: 'list.html',
controller: 'listController'
})
});
// This factory is used to fetch data for list.html from server.
demoApp.factory('demoFactory',function($q,$rootScope)
{
var demoFactoryObj = {};
demoFactoryObj.getData = function()
{
}
return demoFactoryObj;
});
demoApp.controller('homeController',function($scope,$location)
{
$scope.homeData = [
{
name: 'Macallan 12',
price: 50
},
{
name: 'Chivas Regal Royal Salute',
price: 10000
},
{
name: 'Glenfiddich 1937',
price: 20000
}
];
$scope.clickOfButton = function()
{
$location.path('home/list');
}
});
demoApp.controller('listController',function($scope,demoFactory)
{
// When this controller will load then by default I am invoking this factory to get data from server.
//But currently I am showing you static demo.
/*demoFactory.getData().then(function(result)
{
$scope.listData = result;
});*/
console.log('listController loaded');
$scope.listData = [
{
name: 'Abc',
price: 50
},
{
name: 'pqr',
price: 10000
},
{
name: 'xyz',
price: 20000
}
];
});
點擊某一列時，您目前如何決定從服務器檢索哪些數據？在調用'$ location.path（'home/list'）'之前，你是否將它傳遞給工廠？還是使用'$ stateParams'？ – tasseKATT
在調用$ location.path（'home/list'）之前，我將選定的列值存儲在我的服務中，因此當location.path（'home/list'）將調用時，我的第二個模板控制器將加載，然後我獲取從服務存儲參數，然後我傳遞參數到工廠方法。 – user3682511