CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-router
user1027620
user1027620

Reputation: 2785

AngularJS nested $state issue

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

Upvotes: 3

Views: 41

Answers (1)

lin
lin

Reputation: 18392

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.

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>

Brands view

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

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 () {

});

Upvotes: 3

Related Questions