问题描述
使用ui-router的AngularJS应用.我的列表页面正确加载,但是当单击列表页面上的链接时,我的url发生了变化,但页面上的html却没有变化,它仍然保留在列表页面上.此路由有什么问题?
AngularJS app using ui-router.My list page loads correctly, but when clicking on links on the list page my url changes but my html on the page does not change, it remains on the list page. What is wrong with this routing?
app.js
var myApp = angular.module('myApp', ['ui.router']);
myApp.config([
'$stateProvider', function($stateProvider) {
$stateProvider
.state('products', {
url: '',
templateUrl: 'Scripts/templates/manageProducts/products.list.html',
controller: 'productListCtrl'
})
.state('products.detail', {
url: '/:id',
templateUrl: 'Scripts/templates/manageProducts/products.detail.html',
controller: 'productDetailCtrl'
});
}
]);
Index.html
Index.html
<div ng-app="myApp">
<div ui-view></div>
</div>
在products.list.html模板上:
On the products.list.html template:
<a ui-sref="products.detail({ id: 1 })">Detail for Item 1</a>
我什至应该使用UI路由器吗?列表和详细信息页面是2个不同的屏幕.
Should I even be using UI Router? The list and details page are 2 distinct screens.
推荐答案
有一个 plunker ,这应该有助于给出答案:
There is an plunker, which should help to give an answer:
以防万一,我们会继续使用productDetails
状态,我们会松散一些(如果不是很多的话).
In case, that we would continue with productDetails
state, we do loose something (if not even a lot).
在示例中,我们可以看到以下状态定义:
In the example we can see this state definition:
$stateProvider
// parent state for products.detail
// the important thing here is that it must contain
// ui-view="details", because the child is targeting it
.state('products', {
url: '/products',
templateUrl: 'products.list.html',
controller: 'productListCtrl'
})
// here, we will hook into the parent ui-view
// that means one essential thing:
// our scope, will be inherited from parent
.state('products.detail', {
url: '^/:id',
views: {
'detail': {
templateUrl: 'products.detail.html',
controller: 'productDetailCtrl'
}
},
})
直到现在,我们已经看到了标准的嵌套状态父/子.接下来,我们将定义子状态,同时定位根ui-view=""
Until now we've seen the standard nested states parent/child. Next we will define the sub-state, while targeting the root ui-view=""
// this one is as the productDetails
// it skips parent and targets the root view
// despite of the fact, that it is defined as sub-state of the products !
// we won't get anything from parent state
.state('products.detailAsRoot', {
url: '^/product/:id',
views: {
'@': {
templateUrl: 'products.detail.html',
controller: 'productAsRootCtrl'
}
},
});
首先,在javascript/scopes中的继承在这里得到了极大的解释:
Firstly, the inheritance in javascript/scopes is tremendously explained here:
同样重要的是,ui-router中的作用域是以视图嵌套"的方式继承的.
And also, important is, that scopes in ui-router are inherited in a way of "view nesting"
基本引用:
那么所有这些答案是关于什么的?说:如果使用ui-router
,则最大的好处就是作用域继承.父母可以做一次事情……孩子可以再利用它.
So what is all this answer about? To say: if we will use ui-router
, the biggest benefit is the scope inheritance. Parent can do something once... child(ren) can just reuse it.
另请参阅:
- How do I prevent reload on named view, when state changes? AngularJS UI-Router
- Angular UI Router Nested State resolve in child states
- The plunker with working example described here
这篇关于列表页面中的UI路由器负载详细信息页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!