CODEWITHSUNDEEP
angularjsangularjs-scope
Symon kt2
Symon kt2

Reputation: 27

$state.go is not working AngularJS?

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.

Upvotes: 0

Views: 840

Answers (2)

Martijn Welker
Martijn Welker

Reputation: 5605

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

Upvotes: 0

Mervyn
Mervyn

Reputation: 583

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

Upvotes: 0

Related Questions