Question

这是我用Ionic Framework编写的第一个应用程序，我遇到了UI路由器的问题。这是一个非常简单的调查应用程序，我只是想要一个人 - 从调查中选择面部后回答一些其他问题。由于解析数据，我需要问题才能成为调查的孩子。问题是，当我想从父母调查中回答问题状态时，只有URL更改并且没有任何反应。没有错误，只是没有。看起来很简单，只需用另一个视图替换视图，但不知怎的，我可以让它工作。能帮助我吗，我现在整天都在苦苦挣扎。

我的路线：

'use strict';
angular.module('main', [
  'ionic',
  'ngCordova',
  'ui.router',
  // TODO: load other modules selected during generation
])
.config(function ($stateProvider, $urlRouterProvider) {

  // ROUTING with ui.router
  $urlRouterProvider.otherwise('/survey');
  $stateProvider
    // this state is placed in the <ion-nav-view> in the index.html
    .state('main', {
      url: '/main',
      template: '<ion-view view-title="main"></ion-nav-view>',
      // templateUrl: 'main/templates/<someTemplate>.html',
      // controller: 'SomeCtrl as ctrl'

    })
    .state('survey', {
      url: '/survey',
      templateUrl: 'main/templates/survey.html',
      controller: 'SurveyCtrl',
      resolve: {
        questions: function($stateParams, $http) {
          return $http.get('http://localhost:3100/api/surveys/new').then(function(response){
            return response.data;
          });
        }
      }
    })
    .state('survey.question', {
      url: '/questions',
      views: {
        'questions': {
          templateUrl: 'main/templates/questions.html',
          controller: 'QuestionsCtrl',
        }
      },
      params: {
        selectedFace: null
      }
  })

});

的index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <!-- ionic meta tags -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- custom meta tags -->
    <meta name="format-detection" content="telephone=no"> <!-- no auto telephone linking -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">


    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- can be saved to home screen on ios -->
    <title>Store Satisfaction</title>

    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css main/styles/app.css -->
    <!-- inject:css -->
    <link rel="stylesheet" href="main/styles/main.css">
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body ng-app="storeSatisfaction">


    <!-- the current view will be rendered in the <ion-nav-view> directive -->
    <ion-nav-view></ion-nav-view>


    <!-- will be a 404 during development -->
    <script src="cordova.js"></script>

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/ionic/release/js/ionic.js"></script>
    <script src="bower_components/ionic/release/js/ionic-angular.js"></script>
    <script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
    <script src="bower_components/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
    <script src="bower_components/angular-translate/angular-translate.js"></script>
    <script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
    <script src="bower_components/localforage/dist/localforage.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js scripts/app.js -->
    <!-- inject:js -->
    <script src="main/main.js"></script>
    <script src="main/controllers/survey-ctrl.js"></script>
    <script src="main/controllers/questions-ctrl.js"></script>
    <script src="main/constants/config-const.js"></script>
    <script src="app.js"></script>
    <!-- endinject -->
    <!-- endbuild -->
  </body>
</html>

survey.html

<ion-view title="survey">
  <!-- do you want padding? -->
  <ion-content>
    <!-- content goes here -->
    <a ui-sref="main">test</a>
    <div class="main-image polygon">
     <div class="main-text">
       <p class="sub-header">smth</p>
       <p class="main-header">smth</p>
     </div>
    </div>

    <ion-list>
      <ion-item class="item item-icon">
        <a><img src="main/assets/images/smile1.png" class="smiley-face" ng-click="proceedSurvey('very_good', 'positive')"></a>
      </ion-item>
      <ion-item class="item item-icon">
        <img src="main/assets/images/smile2.png" class="smiley-face" ng-click="proceedSurvey('good', 'positive')">
      </ion-item>
      <ion-item class="item item-icon">
        <img src="main/assets/images/smile3.png" class="smiley-face" ng-click="proceedSurvey('neutral', 'negative')">
      </ion-item>
      <ion-item class="item item-icon">
        <img src="main/assets/images/smile4.png" class="smiley-face" ng-click="proceedSurvey('bad', 'negative')">
      </ion-item>
      <ion-item class="item item-icon">
        <img src="main/assets/images/smile5.png" class="smiley-face" ng-click="proceedSurvey('very_bad', 'negative')">
      </ion-item>
    </ion-list>
    <div class="footer-text">
      Pomóż nam przekraczać nasze granice
    </div>
    <ui-view name="questions"></ui-view>


  </ion-content>
</ion-view>

SurveyCtrl.js

'use strict';
angular.module('main')
.controller('SurveyCtrl', function ($scope, $state) {

  $scope.proceedSurvey = function(rate, type) {
    var params = {rate: rate, type: type};
    $state.go('survey.question', {selectedFace: params})
  }
});

Ionic与UI路由器和子状态 - URL更改但不更改视图

0 个答案: