AngularJS嵌套的$state问题

Question

AngularJS嵌套的$state问题

javascripthtmlangularjsangular-ui-router

3

  $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>

总是重定向到父级。为什么？

- user1027620

你能在 Plunker/Fiddle 上重现这个吗？ - tanmay

1

您的父视图中可能没有 ui-view 容器。 - Alon Eitan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lin · Accepted Answer

它可以正常工作。只需在应用程序的config部分中一次性配置您的states。请检查此运行中的plnkr演示并将其与您的解决方案进行比较。确保您在父视图中有一个<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 () {

});