Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 254
user1027620 Avatar asked Jul 30 '26 06:07

user1027620


1 Answers

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

});
like image 159
lin Avatar answered Jul 31 '26 23:07

lin