angularjs ui-router：如何從控制器內部更改狀態或頁面

Question

我正在使用Angularjs和Ui-router。 我可以用HTML調用ui-sref頁面。 我想在使用ui-router時從控制器調用新頁面。 你怎么做 我已經給出了下面的代碼。

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',"");

        }
        }
    })

和下面的HTML

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

我打電話給狀態更改或在$state.go('results',"");調用新頁面$state.go('results',""); 位置。 你怎么做呢。

$state.go似乎不起作用。 我想去結果頁面

Answer 1

你必須在控制器中注入$state

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

然后，你可以使用它

$state.go('results');

Answer 2

你必須使用$state.go('results'); 而不是$state.go('results', ""); 。 第二個字段用於設置$state.go方法的選項。 我猜它沒有用，因為你把它留作空字符串。 如果你沒有放任何東西，它將使用默認值。

angularjs ui-router：如何從控制器內部更改狀態或頁面

問題描述

2 個解決方案

解決方案1
2 2016-03-23 08:02:31

解決方案2
1 已采納 2016-03-23 07:53:20

angularjs ui-router：如何從控制器內部更改狀態或頁面

問題描述

2 個解決方案

解決方案1 2 2016-03-23 08:02:31

解決方案2 1 已采納 2016-03-23 07:53:20

解決方案1
2 2016-03-23 08:02:31

解決方案2
1 已采納 2016-03-23 07:53:20