AngularJS嵌套$ state问题

时间:2017-04-17 09:06:54

标签: javascript html angularjs angular-ui-router

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

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

1 个答案:

答案 0 :(得分:3)

它确实可以正常工作。只需一劳永逸地在应用程序的states部分配置config即可。请检查此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 () {

});