$stateProvider.state('brands', {
url: '/brands',
controller: 'brandsController',
templateUrl: 'views/brands/brands.html'
});
and
$stateProvider.state('brands.details', {
url: '/details/:uid',
controller: 'brandController',
templateUrl: 'views/brand/brand.html',
params: { brand: null, product: null }
});
using
<a ui-sref="brands.details({ uid: brand.uid, brand: brand, product: product })">{{ product.name }}</a>
Always redirects to the parent. Why?
It does work fine. Just configure your states in the config part of your application once and for all. Please check this running plnkr demo and compare it with your solution. Ensure you have an <div ui-view=""></div> inside your parent view.
<!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 () {
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With