AngularJS 嵌套 $state 问题答案

【问题标题】：AngularJS nested $state issueAngularJS 嵌套 $state 问题
【发布时间】：2017-04-17 17:29:27
【问题描述】：

  $stateProvider.state('brands', {
    url: '/brands',
    controller: 'brandsController',
    templateUrl: 'views/brands/brands.html'
  });

和

  $stateProvider.state('brands.details', {
    url: '/details/:uid',
    controller: 'brandController',
    templateUrl: 'views/brand/brand.html',
    params: { brand: null, product: null }
  });

使用

  <a ui-sref="brands.details({ uid: brand.uid, brand: brand, product: product })">{{ product.name }}</a>

始终重定向到父级。为什么？

【问题讨论】：

你能用 plunker/fiddle 重现这个吗？
父视图中可能没有ui-view 容器

标签： javascript html angularjs angular-ui-router

【解决方案1】：

它确实工作正常。只需在应用程序的config 部分配置您的states，一劳永逸。请检查此running plnkr demo 并将其与您的解决方案进行比较。确保您的父视图中有一个<div ui-view=""></div>。

索引视图

<!DOCTYPE html>
<head>
  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-app="myApp">
  <h2>AngularJS Ui router - Demonstration</h2>
  <div data-ui-view=""></div>
</body>

</html>

品牌视图

<h1>Brands</h1>
<div>
     <div>
         <span ui-sref="brands.details({uid: brand.uid, brand: brand, product: product})">
             <a href="">Brand</a>
         </span>
     </div>
     <div>
         <div ui-view=""></div>
     </div>
</div>

AngularJS 应用程序

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.when("", "/brands");

    $stateProvider
        .state("brands", {
            url: "/brands",
            controller: 'brandsController',
            templateUrl: "brands.html"
        }).state('brands.details', {
            url: '/details/:uid',
            controller: 'brandController',
            templateUrl: 'brand.html',
            params: { brand: null, product: null }
        });
}); 

myApp.controller('brandsController', function () {

});

myApp.controller('brandController', function () {

});

【讨论】：

好答案。我还将参考this link，以便 OP 可以为每个状态创建专用视图