AngularJS状态在离子

时间:2016-10-28 09:22:44

标签: javascript angularjs ionic-framework state

我是Ionic的新手,我对状态有疑问。我使用Ionice选项卡模板,我有几个选项卡。在其中一个标签中有一个指向另一个页面的链接。但'国家'不起作用。这可能很容易,但我无法解决。

我的代码在这里(没有将它连接到离子,只是粘贴代码)。我想tab.read工作 - 这个页面的链接在tab.dash。

// Ionic Starter App
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

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

    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

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

  .state('account', {
    url: '/account',
    views: {
      '': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })
  .state('tab.read', {
      url: '/read/:newsId',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-read.html',
          controller: 'ReadCtrl'
        }
      }
    })

    .state('tab.informacje', {
      url: '/informacje',
      views: {
        'tab-informacje': {
          templateUrl: 'templates/tab-informacje.html',
          controller: 'InformacjeCtrl'
        }
      }
    })

  .state('tab.zglos', {
    url: '/zglos',
    views: {
      'tab-zglos': {
        templateUrl: 'templates/tab-zglos.html',
        controller: 'ZglosCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/tab/dash');

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-view view-title="TestApp">
  <ion-content>

    <div class="news">

      <div class="list card" ng-repeat="item in news">
        <div class="item item-dark">
          <h2 class="light">{{ item.title }}</h2>
          <p class="dark-light">{{ item.date }}</p>
        </div>

        <div class="item item-body">
            <p>{{ item.text }}</p>
            <button href="#/tab/read/{{ item.id }}" class="button button-small button-balanced">Przeczytaj całe</button>
        </div>

      </div>

    </div>

  </ion-content>
</ion-view>

此外,帐户无法正常运作。但首先我必须用tab.read解决问题

1 个答案:

答案 0 :(得分:-1)

使用 ui-sref 导航ui.router

<div class="item item-body">
   <p>{{ item.text }}</p>
   <button ui-sref="tab.read({newsId: {{item.id}} })" class="button button-small button-balanced">Przeczytaj całe</button>
</div>