Question

angular.module('mobApp', ['ionic', 'mobApp.controllers','ngCordova', 'mobApp.services', 'mobApp.directive', 'yaru22.angular-timeago', 'monospaced.elastic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config（function（$ stateProvider，$ urlRouterProvider）{ $ stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
  .state('app.search', {
    url: '/search',
    views: {
      'menuContent': {
        templateUrl: 'templates/search.html'
      }
    }
  })
  .state('app.page1', {
      url: '/page1',
      templateUrl: 'templates/page1.html',
      controller: 'PageCtrl'
  })
  .state('app.page2', {
      url: '/page2',
      templateUrl: 'templates/page2.html',
      controller: 'PageCtrl'
  })
  .state('app.page3', {
      url: '/page3',
      templateUrl: 'templates/page3.html',
      controller: 'PageCtrl'
  })    
  $urlRouterProvider.otherwise('/app/search');

index.html

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>

在search.html内我点击此链接时<a href="#/app.page1">page1</a>无法正常工作。它显示我预期的页面导航

search.html - > page1.html - > page2.html -> page3.html

Answer 1

我假设你正在使用角度ui-router。请注意网址和状态之间的区别。如果要导航到名为app.page1的状态，则有两个选项。

<a href="#/app/page1">...</a>，因为您定义了（嵌套）状态的网址。
<a ui-sref="app.page1">...</a>使用ui-router提供的指令使用状态名称（.state（）调用中的第一个参数）进行导航。

第二种方式是首选方式，因为它允许您更改状态的网址而不修改您已设置的所有链接。另外，让库构建最终的URL会使用一个简单的标志更容易从锚链接（＃/ ...）切换到html5模式。

根据您定位的设备，您可能希望为浏览器插入一个空的href（href =“”）以正确呈现链接。

有关详细信息，请查看https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

angularjs页面导航无法正常工作

1 个答案: