$state.go is not working AngularJS?

Question

How to call ui-view from another Controller in AngularJS

This is my sample program. Actually in here I am using nested ui-view. The problem is when I click the submit button initially it works fine and show an alert in SampleController

But again i clicked it wwithout refreshing the page it doesnt go to SampleController why?

I need to go to that controller when i click on submit button

Is it any error on my code.Please check it my stateProvider too.I am a new starter in AngularJS

Plese correct me Thank you...

var app=angular.module('TestApp', ['angular.filter','ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('category', {
        views : {   
            "body" : {
                url : '/category',
                templateUrl : 'category.html',
                controller : 'TestController'
            }
        }       
    })
    .state('category.subcategory', {
        url : '/subcategory',
        views : {                              
            "subbody@category" : {
                templateUrl : 'sample.html',
                controller : 'SampleController'              
            }
        }
    })
});

app.controller('MainController', MainController);
function MainController($scope,$state) {
    alert("This is MainController") 
    $scope.getCategory=function(){
        $state.go('category');
    }
}

app.controller('TestController', TestController);
function TestController($scope, $state){    
    $scope.getData=function() {
        alert("Call to Sample Controller")
        $state.go('.subcategory');
    }
}

app.controller('SampleController', SampleController);
function SampleController($scope,$state) {
    alert("This is SampleController")
}

This is my sample HTML files
index.html

<!DOCTYPE html>
<html ng-app="TestApp">

  <head>
    <link rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
        <script src="angular-ui-router.js"></script>    
        <script src="script.js"></script>
  </head>
    <body ng-controller="MainController">
        <a href="#" ng-click="getCategory()">Click to Category</a>
        <div ui-view="body">
            <div ui-view="subbody"></div>
        </div>  
    </body>
</html>

category.html

 <div>      
   <input type="button" name="button" id="button" value="Submit" ng-click="getData()" />
   <div ui-view="subbody"></div>
 </div>

sample.html

 <div>
    Sample Controller
</div>

I need to hit SampleController when i click submit button

In my project that submit button portion contains two select boxes category and subcategory .Based on that catgeory and subcategory i need to show details on the SampleController.So refreshing only done by SampleController.

have you tried `category.subcategory` instead of `.subcategory` in your `$state.go` ? — Martijn Welker, Mar 03 '16 at 07:40
@Symon kt2 : check the link http://stackoverflow.com/questions/19516771/state-go-toparams-not-passed-to-stateparams it might be helpfull to yo. — lalitpatadiya, Mar 03 '16 at 07:43
@Symonkt2 If you try both my above comment and change `"subbody@category"` to `"subbody@body"`, does that do anything ? — Martijn Welker, Mar 03 '16 at 07:46
@code_6c616c6974 Can you help me I checked but its not wlorking — Symon kt2, Mar 03 '16 at 07:47
@MartijnWelker no Sir its not working .. Actually subbody@category is correct its come inside that category any other method.. — Symon kt2, Mar 03 '16 at 07:51
When the page is refreshing its working fine but the thing is that In my project that submit button portion contains two select boxes category and subcategory .Based on that catgeory and subcategory i need to show details on the SampleController.So refreshing only done by SampleController. — Symon kt2, Mar 03 '16 at 07:54
@Symonkt2 problem is ui-router will not refresh a `state` when it is on same `state` — Pankaj Parkar, Mar 03 '16 at 07:54
@Pankaj Parkar please cheeck it my code any error on that .I am new in angularjs Can you help me — Symon kt2, Mar 03 '16 at 07:57

score 0 · Answer 1 · answered Mar 03 '16 at 07:56

0

First, confirm 'localhost/category/subcategory' in browser address bar is working, then use $state.go('category.subcategory').

answered Mar 03 '16 at 07:56

Mervyn

543
4
15

working Sir but problem is again i clicked that submit button I couldnt get alert from SampleController – Symon kt2 Mar 03 '16 at 08:01

score 0 · Accepted Answer · answered Mar 03 '16 at 08:00

0

The problem is that your views aren't properly nested and that your declaration is a bit wrong, here's a working plnkr.

First off, you forgot to put the subbody ui-view in category.html template:

<div ui-view="subbody"></div>

and since category.subcategory is a childstate of category you dont have to use @ in your view declaration

answered Mar 03 '16 at 08:00

Martijn Welker

5,575
1
16
26

my code is also same Sir. you just check it your code if you click again- Go to Sample state button $state.go is not working.I need that condition – Symon kt2 Mar 03 '16 at 08:06
@Symonkt2 What exactly isn't working ? I don't really get it – Martijn Welker Mar 03 '16 at 08:07
In my project that submit button portion contains two select boxes category and subcategory .Based on that catgeory and subcategory i need to show details on the SampleController.So refreshing only done by SampleController. Not to refresh the selectbox portion – Symon kt2 Mar 03 '16 at 08:09
Sir you just click again in your Go to Sample state button without refreshing its not working..You just check it that – Symon kt2 Mar 03 '16 at 08:10
@Symonkt2 I think I got what you want now, I've updated the plunkr – Martijn Welker Mar 03 '16 at 08:14
@Actually i am new in AngularJS and my language is also little bit difficult to you, I know Thank you for everything Actually im a student. In my project that submit button portion contains two select boxes category and subcategory .Based on that catgeory and subcategory i need to show details on the SampleController.So refreshing only done by SampleController. But i checked it in my system in your code works fine. But not working in my project I dont know Ok any way fine Thankyou and God bless you. one more thing how to add plunker in stack overflow ,my mail id is: symonkt2@gmail.com – Symon kt2 Mar 03 '16 at 08:37

$state.go is not working AngularJS?

2 Answers2