列表页面中的UI路由器负载详细信息页面 [英] UI Router load detail page from a list page

问题描述

使用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:

我什至应该使用UI路由器吗?列表和详细信息页面是2个不同的屏幕.

Should I even be using UI Router? The list and details page are 2 distinct screens.

以防万一，我们会继续使用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:

• AngularJS中范围原型/原型继承的细微差别是什么?

同样重要的是，ui-router中的作用域是以视图嵌套"的方式继承的.

And also, important is, that scopes in ui-router are inherited in a way of "view nesting"

• 仅按视图层次结构进行范围继承

基本引用:

请记住，如果您的状态的视图是嵌套的，则范围属性仅沿状态链向下继承.范围属性的继承与状态的嵌套无关，而与视图(模板)的嵌套无关.

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

那么所有这些答案是关于什么的?说:如果使用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.

另请参阅:

• 状态更改时，如何防止在命名视图上重新加载? AngularJS UI路由器
• 在子状态下的角度UI路由器嵌套状态解析
• plunker ，此处提供了工作示例

• 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路由器负载详细信息页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！