UI Router 从列表页面加载详细信息页面 [英] 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'
            });
    }
]);

索引.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，最大的好处就是作用域继承.父母可以一次做某事......孩子(ren)可以重复使用它.

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-路由器
• Angular UI Router Nested State resolve in child states
• 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 Router 从列表页面加载详细信息页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！