Question

当我在Google Chrome浏览器中查看该页面并点击已生成的目标列表时，网址将更改为URL/#/tabs/personalview，但视图无法更改。

这是我的personalGoals.html文件中的代码：

<ion-view view-title="PersonalGoals">
  <ion-content class="has-footer">
    <ion-item ng-repeat="goal in goals" href="#/tabs/personalview">
      <span class="goal-lists">{{goal.goaltitle}}</span>
    </ion-item>
  </ion-content>
</ion-view>

这是我的app.js文件中的代码：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
  $ionicConfigProvider.tabs.position('bottom');

  $stateProvider

.state('tabs', {
        url: '/tabs',
        abstract: true,
        templateUrl: 'templates/tabs.html'
      })

.state('tabs.personal', {
        url: '/personal',
        views: {
          'personalGoals-view': {
            templateUrl: 'templates/personalGoals.html',
            controller: 'personalCtrl'
          }
        }
      })

.state('tabs.personalview', {
        url: '/personalview',
        templateURL: 'templates/test.html',
        controller: 'personalViewCtrl'
      })

.state('tabs.relationship', {
        url: '/relationship',
        views: {
          'relationshipGoals-view': {
            templateUrl: 'templates/relationshipGoals.html',
            controller: 'relationshipCtrl'
          }
        }
      })

.state('tabs.squad', {
        url: '/squad',
        views: {
          'squadGoals-view': {
            templateUrl: 'templates/squadGoals.html',
            controller: 'squadCtrl'
          }
        }
      });
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('tabs/dashboard');
    });

您可以在here上看到完整的代码。

非常感谢任何帮助，谢谢你。

Answer 1

我认为您的问题是您尝试导航到错误的网址。

当您导航到州URL时，您正试图导航到州名。

有两种方法可以做到这一点：

您可以继续使用href，并将网址更改为＃/ personalview
您可以使用ui-sref代替href并执行类似ui-sref =“tabs.personalview”的内容

您可以查看以下内容以供参考：

https://www.thepolyglotdeveloper.com/2014/11/using-ui-router-navigate-ionicframework/

https://www.thepolyglotdeveloper.com/2014/12/using-nested-states-angularjs-ui-router/

最佳，

URL更改但视图无法更改

1 个答案: