Question

我创建了以下主屏幕。点击每个链接，它必须打开相应的视图。

到目前为止，我写过：

的index.html

<body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Checkout</h1>
      </ion-header-bar>
      <ion-content>
        <div class="row blue-bg">
          <div class="col col-50 white">
            <ul class="list-inline">
              <li><a href="#">Catalog</a></li>
              <li><a href="#">Inventory</a></li>
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Transaction</a></li>
            </ul>
          </div>
          <div class="col col-40 white">Logo</div>
          <div class="col col-10 .col-offset-25 white">Right</div>
        </div>
      </ion-content>
    </ion-pane>
  </body>

app.js

angular.module('starter', ['ionic', 'starter.controllers'])
    .run(function ($ionicPlatform) {
      $ionicPlatform.ready(function () {
        if (window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

controllers.js

angular.module('starter.controllers', [])
    .controller('PaymentListCtrl', function ($scope) {
        $scope.productItems = [
            {
                name: 'Product 1',
                price: '$50.00'
            },
            {
                name: 'Product 2',
                price: '$45.00'
            }
        ]
    })

请注意我是Ionic和Angular的新手。如果你能提供一个简单易用的方法，那就很棒了

Answer 1

尝试定义状态并重定向视图

<body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Checkout</h1>
      </ion-header-bar>
      <ion-content>
        <div class="row blue-bg">
          <div class="col col-50 white">
            <ul class="list-inline">
              <li><a href="#">Catalog</a></li>
              <li><a href="#">Inventory</a></li>
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Transaction</a></li>
            </ul>
          </div>
          <div class="col col-40 white">Logo</div>
          <div class="col col-10 .col-offset-25 white">Right</div>
        </div>
<ion-nav-view></ion-nav-view>
      </ion-content>
    </ion-pane>
  </body>

在另一个页面中定义您的视图 view1.html

 <ion-view view-title="Admin">
    <ion-content class="padding text-center">
      //define your content here
    </ion-content>
    </ion-view>

app.js中的

定义像这样的状态

.state('main', {
            url: '/index',
            abstract: true,
            templateUrl: '{{yourpath}}/index.html'
        })
        .state('main.view', {
            url: '/view',
            templateUrl: '{{yourpath}}/admin.html',


        })

可能这可以帮到你

Answer 2

我刚刚做了一个简单明了的demo。

的index.html：

<body ng-controller="MainCtrl">

  <!-- Make a fancy menu here -->
  <a href="#/">Welcome</a>
  <a href="#/goodbye">Exit</a>

  <!-- The templates will be inserted here -->
  <ng-view></ng-view>

</body

App.js：

var app = angular.module('plunker', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.
    when('/', {
      templateUrl: 'welcome.tmpl.html',
      controller: 'welcomeCtrl'
    }).
    when('/goodbye', {
      templateUrl: 'goodbye.tmpl.html',
      controller: 'goodbyeCtrl'
    });
}]);

app.controller('MainCtrl', function($scope) {
  //Code goes here
});

app.controller('welcomeCtrl', function($scope) {
  $scope.welcome = "Welcome to the 'Welcome' page";
});

app.controller('goodbyeCtrl', function($scope) {
  $scope.goodbye = "Goodbye? I guess?";
});

当然，我们需要插入模板，这些只是2个简单的.html文件，不包含<html>，<head>和<body>。

希望你有足够的信息，如果不是，请告诉我。

Answer 3

您可以从JSFiddle

获得一些帮助

实际上已从此JSFiddle

复制

sensors-object

HTML：

angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope, $ionicModal) {
////.....
  $scope.triggerViewUpdate = function() {
     // JSFiddle didn't seem to like ng-template script tags...
     $ionicModal.fromTemplate('<ion-modal-view>...Content...</ion-modal-view>').show();
  };
})

离子：如何打开点击视图？

3 个答案: