$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>
始终重定向到父级。为什么呢?
答案 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>
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 () {
});