AngularJS nested problem in $ state
$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?
+3
source to share
1 answer
It works fine. Just tweak states
in parts of config
your application once and for all. Please check the running plnkr demo and compare it with your solution. Make sure you have a <div ui-view=""></div>
parent view inside.
Index 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>
Browse brands
<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 app
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 () {
});
+3
source to share