Невозможно заменить вид с помощью <ion-nav-view>

Question

Невозможно заменить вид в ионной форме. У меня есть меню в виде кнопок, когда я нажимаю их мнение не получает replaces.Below код, который я попробовал

**index.html** 
<div class="button-bar"> 
    <a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a> 
    <a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a> 
    <a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a> 
</div> 
<ion-nav-view name="page1"></ion-nav-view> 
<ion-nav-view name="page2"></ion-nav-view> 
<ion-nav-view name="page3"></ion-nav-view> 

The JS файлы, используемые для замены view.In page.controller.js ничего Theres , Просто объявлено с помощью app.controller, и ничего не существует.

**pages.js** 
app.config(function($stateProvider, $urlRouterProvider) {  
$stateProvider.state('page1', { 
    cache: false, 
    parent:'app',   
    views: { 
     'page1': { 
      templateUrl: 'templates/page1.html', 
      controller: 'pages.controller' 
     } 
    } 
}).state('page2', { 
    cache: false, 
    parent:'app',   
    views: { 
     'page2': { 
      templateUrl: 'templates/page2.html', 
      controller: 'pages.controller' 
     } 
    } 
}).state('page3', { 
    cache: false, 
    parent:'app',   
    views: { 
     'page3': { 
      templateUrl: 'templates/page1.html', 
      controller: 'pages.controller' 
     } 
    } 
}) 
}); 

Ниже представлены html-страницы для просмотров.

page1.html 
<ion-view view-title="page1"> 
<ion-content> 
<div> <h2> Welcome to Page 1</h2> </div> 
</ion-view> 
</ion-content> 



page2.html 
<ion-view view-title="page2"> 
<ion-content> 
<div> <h2> Welcome to Page 2</h2> </div> 
</ion-view> 
</ion-content> 



page3.html 
<ion-view view-title="page3"> 
<ion-content> 
<div> <h2> Welcome to Page 3</h2> </div> 
</ion-view> 
</ion-content> 



app.js 
var app = angular 
    .module(
      'sampleapp', 
      [ 'ionic' ]).config(
      function($stateProvider, $urlRouterProvider) { 
       $stateProvider 
         .state('app', { 
          cache : false, 
          url : "/app", 
          abstract:true, 
          templateUrl : "templates/index.html", 
          controller : 'appcontroller' 
         }) 

Пожалуйста, помогите мне понять, почему вид не заменяется.

Answer 1

это, скорее всего, потому, что у вас есть 3 разных типа тегов с ионами, и каждое из них имеет отдельное имя, а каждое состояние заменяет его только тег. Это означает, что даже если ваши взгляды вводятся, они будут перекрываться (и, вероятно, почему вы не видите, что ваши взгляды меняются, поскольку они перекрываются).

Вы должны изменить:

index.html

<div class="button-bar"> 
    <a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a> 
    <a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a> 
    <a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a> 
</div> 
<ion-nav-view name="page-content"></ion-nav-view> 

pages.js

app.config(function($stateProvider, $urlRouterProvider) {  
$stateProvider.state('page1', { 
    cache: false, 
    parent:'app',   
    views: { 
     'page-content': { 
      templateUrl: 'templates/page1.html', 
      controller: 'pages.controller' 
     } 
    } 
}).state('page2', { 
    cache: false, 
    parent:'app',   
    views: { 
     'page-content': { 
      templateUrl: 'templates/page2.html', 
      controller: 'pages.controller' 
     } 
    } 
}).state('page3', { 
    cache: false, 
    parent:'app',   
    views: { 
     'page-content': { 
      templateUrl: 'templates/page1.html', 
      controller: 'pages.controller' 
     } 
    } 
}) 
});