没有导航的离子视图

Question

我正在使用 Ionic 构建我的第一个混合应用程序，但有些东西我不明白。 ion-nav-view有什么用。

我解释一下：我有一个带有“导航标签”的应用程序。这是导航选项卡的代码：

<ion-tab title="Contacts" icon="icon-users" href="#/tab/contacts">
    <ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>

这里一切正常。 所以现在，我的联系人列表是这样的：

<ion-item href="#/tab/contacts/{{contact.id}}" ng-repeat="contact in contacts | orderBy:'name'">
    {{contact.name}}
</ion-item>

这是我的问题：我已经为 '/tab/contacts/:id' 配置了一个路由和一个视图。问题是：我应该将“ion-nav-view”指令的等效项放在哪里，以便在单击时实际显示我的视图？

谢谢！

Answer 1

我认为最好的答案是一个类似于您想要做的工作示例。

但是<ion-nav-view> 必须在您的 index.html 中，并且路由/状态管理器将放置您的视图模板。模板有另一个指令<ion-view>，它包装了视图的所有其他指令和内容。

检查下面的sn-p：

angular.module('ionicApp', ['ionic'])

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

  $stateProvider
    .state('tabs', {
      url: '/tab',
      abstract: true,
      templateUrl: 'views/tabs.html'
    })
    .state('tabs.contacts', {
      url: '/contacts',
      views: {
        'tab-contacts': {
          templateUrl: 'views/contacts.html',
          controller: 'contactsCtrl',
          resolve: {
            allcontacts: function(Contacts) {
              console.log("resolve allcontacts");
              return Contacts.all();
            }
          }
        }
      }
    })
    .state('tabs.detail', {
      url: '/detail/:id',
      views: {
        'tab-detail': {
          templateUrl: 'views/detail.html',
          controller: 'detailCtrl',
          resolve: {
            contact: function($stateParams, Contacts) {
              return Contacts.get($stateParams.id);
            }
          }
        }
      }
    });

  $urlRouterProvider.otherwise("/tab/contacts");

})

.controller('contactsCtrl', function($scope, $ionicLoading, $ionicPopover, $ionicPopup, $compile, $http, allcontacts) {
  console.log("contactsCtrl");
  $scope.contacts = allcontacts;
})

.controller('detailCtrl', function($scope, contact, $ionicHistory) {
  $scope.contact = contact;
  console.log("detailCtrl", contact);
  $scope.myGoBack = function() {
      $ionicHistory.goBack();
  };
})

.factory('Gravatar', function() {
  return {
    getUrl: function(s){ 
      return "https://secure.gravatar.com/avatar/"+CryptoJS.MD5(""+Math.random())+"?d=identicon&s="+s;
    }
  }
})

.factory('Contacts', function($http, $q, $timeout, Gravatar) {
  var contacts = [];
  return {
    all: function(){
      var dfd = $q.defer();
      //$http.get('../data/contacts.json').then(function(response){
      $timeout(function() {
        //contacts = response.data;
        contacts = [{
          id: 1,
          name: "William",
          surname: "Hayes",
          fullname: "Grace Beatty",
          image: Gravatar.getUrl(128)
        }, {
          id: 2,
          name: "James",
          surname: "Jennings",
          fullname: "Hilda Gross",
          image: Gravatar.getUrl(128)
        }, {
          id: 3,
          name: "Judith",
          surname: "Silverman",
          fullname: "Bruce Kern",
          image: Gravatar.getUrl(128)
        }, {
          id: 4,
          name: "Greg",
          surname: "Fitzpatrick",
          fullname: "Heather Bowers",
          image: Gravatar.getUrl(128)
        }, {
          id: 5,
          name: "Teresa",
          surname: "McLean",
          fullname: "Leon Baker",
          image: Gravatar.getUrl(128)
        }, {
          id: 6,
          name: "Emily",
          surname: "Lassiter",
          fullname: "Virginia Pittman",
          image: Gravatar.getUrl(128)
        }, {
          id: 7,
          name: "Don",
          surname: "Sinclair",
          fullname: "Ashley Richards",
          image: Gravatar.getUrl(128)
        }, {
          id: 8,
          name: "Hazel",
          surname: "Livingston",
          fullname: "Gloria O",
          image: Gravatar.getUrl(128)
        }, {
          id: 9,
          name: "Regina",
          surname: "Braun",
          fullname: "Monica Casey",
          image: Gravatar.getUrl(128)
        }, {
          id: 10,
          name: "Leroy",
          surname: "Pritchard",
          fullname: "Gretchen Sharpe",
          image: Gravatar.getUrl(128)
        }];
        //console.log(contacts);
        dfd.resolve(contacts);
        console.log("contacts.all");
      });
      return dfd.promise;
    },
    get: function(id) {
      for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].id == id) {
          return contacts[i];
        }
      }
      return null;
    }
  }
});

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Ionic detail view</title>
  <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
  <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
</head>

<body>

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

  <script id="views/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">
      <ion-tab title="Contacts" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/contacts">
        <ion-nav-view name="tab-contacts"></ion-nav-view>
      </ion-tab>
      <ion-tab title="Contact detail" icon-off="ion-ios-person-outline" icon-on="ion-ios-person href="#/tab/detail">
        <ion-nav-view name="tab-detail"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </script>

  <script id="views/contacts.html" type="text/ng-template">
    <ion-view title="Contacts">
      <ion-content>
        <ion-list>
        <ion-item class="item item-thumbnail-left" ng-repeat="contact in contacts" ui-sref="tabs.detail({ id: contact.id })">
          <img ng-src="{{ contact.image }}" />
          <h2>{{ contact.name }}</h2>
          <p>{{ contact.fullname }}</p>
        </ion-item>
        </ion-list>
      </ion-content>
    </ion-view>
  </script>

  <script id="views/detail.html" type="text/ng-template">
    <ion-view title="Contact detail">
      <ion-nav-buttons side="left">
        <button class="button button-clear" ng-click="myGoBack()" >
        <i class="icon ion-ios-arrow-back"></i>
        Back</button>
      </ion-nav-buttons>
      <ion-content>
        <ion-item class="list-item">
          <img ng-src="{{ contact.image }}" alt="{{ contact.name }}" />
          <div class="list-details">
            <p class="sub-heading"><b>Name:</b> {{ contact.name }}</p>
            <p><b>Surname:</b> {{ contact.surname }}</p>
            <p><b>Fullname:</b> {{ contact.fullname }}</p>
          </div>
        </ion-item>
      </ion-content>
    </ion-view>
  </script>
  
</body>
</html>