没有导航的离子视图

Question

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

我解释：我有一个“nav-tabs”应用程序。这里是一个导航标签的代码：

<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> 

这里是我的问题：我已经配置了“/标签/联系人/：身份证”的路线，和视图。问题是：我应该在哪里放置相应的“ion-nav-view”指令，以便在点击时实际显示我的视图？

谢谢！

Answer 1

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

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

检查下面的代码片段：

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>