CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-router
Ravi
Ravi

Reputation: 13

angularjs ui-router : How to change state or page from inside controller

I am using Angularjs and Ui-router. I am able to call the pages with ui-sref from HTML. I want to call for a new page from controller when using ui-router. How to do you do it. I have given the code below.

var app = angular.module('starter', ['ionic'])

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

  $stateProvider.state('home', {
  url: '/home',
  views: {
    home: {
      templateUrl: 'home.html'
    }
  }
})

  $stateProvider.state('results', {
  url: '/results',
  views: {
    results: {
      templateUrl: 'results.html'
    }
  }
})

$stateProvider.state('help', {
  url: '/help',
  views: {
    help: {
      templateUrl: 'help.html'
    }
  }
})
})
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller ("mainCtrl", function($scope) {
    $scope.devList1 = [
    {text:'Most Accurate', checked: false},
    {text:'Accurate', checked: false}, 
    {text:'Neutral', checked: false},
    {text:'Inaccurate', checked: false},
    {text:'Most Inaccurate', checked: false}];
    $scope.indexToShow = 0;
    $scope.questionlist = ["one", "two" , "three", "four", "five"];

     $scope.imChanged = function(isChecked, index){      
             angular.forEach($scope.devList1, function (items) {
                items.checked= false;
            });
            $scope.devList1[index].checked=true;
            $scope.okaychecked = true;
        }
    $scope.nextquestion =  function(){
        $scope.okaychecked = false;
        angular.forEach($scope.devList1, function (items) {
                items.checked= false;
            });
        if (($scope.indexToShow) < ($scope.questionlist.length - 1)){
            $scope.indexToShow = ($scope.indexToShow + 1) % $scope.questionlist.length;
            }
        else {
            $state.go('home',"");

        }
        }
    })

and html below

 <body ng-app="starter" ng-controller = "mainCtrl">


<ion-nav-bar class="bar-positive">
</ion-nav-bar>


  <ion-tabs class="tabs-positive" tabs-icon-top>
    <ion-tab icon="ion-home" ui-sref="home">
      <ion-nav-view name="home"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-help" ui-sref="help">
      <ion-nav-view name="help"></ion-nav-view>
    </ion-tab>
  </ion-tabs>

  <script type="text/ng-template" id="home.html">
  <ion-view title="Single">
    <ion-content padding="true">
      <h2>Single Construct</h2>
      <p>Here Single Constructs.</p>
    </ion-content>
  </ion-view>
</script>

  <script type="text/ng-template" id="results.html">
  <ion-view title="Results">
    <ion-content padding="true">
      <h2>Results</h2>
      <p>Results here</p>
    </ion-content>
  </ion-view>
</script>

<script type="text/ng-template" id="help.html" >
  <ion-view title="Multiple">

      <ion-content padding = "true">      
        <div class="card"> 
            <div class="item item-text-wrap" ng-repeat="item in questionlist track by $index" ng-show="$index == indexToShow">
                    {{item}}
                </div>          
        </div>
        <ion-checkbox  ng-repeat="items in devList1" ng-model="items.checked"  ng-change="imChanged(items.checked, $index)" ng-value = "items">{{items.text}}
            </ion-checkbox>
        <div  ng-show="okaychecked">
            <a class="button icon-right ion-chevron-right button-positive" ng-click = "nextquestion()" >NEXT</a>
        </div>
        </ion-content>
  </ion-view>
</script>
  </body>
</html>

I hv to call the state change or call new page at $state.go('results',""); position. How do you do it.

$state.go don't seem to work. I want to go to results page

Upvotes: 1

Views: 6152

Answers (2)

ddepablo
ddepablo

Reputation: 677

You have to inject $state in your controller

.controller ("mainCtrl", function($scope, $state) {

Then, you can use it

$state.go('results');

Upvotes: 2

Jur Clerkx
Jur Clerkx

Reputation: 698

You have to use $state.go('results'); in stead of $state.go('results', "");. The second field is for setting the options of the $state.go method. I guess it's not working because you leave this as an empty string. If you don't put anything there, it will use the default values.

Upvotes: 1

Related Questions