Angularjs 无法将视图替换为<；离子导航视图>；

无法将ionic中的视图替换为。我有一个按钮形式的菜单，当我点击它们时，视图不会被替换。下面是我尝试过的代码

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

下面是视图的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'
                        })

page1.html
欢迎来到第一页
页面2.html
欢迎来到第2页
页面3.html
欢迎来到第三页
app.js
var app=角度
.模块(
“sampleapp”，
['ionic']）.config(
函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.state（'应用程序'{
cache:false，
url:“/app”，
摘要：没错，
templateUrl:“templates/index.html”，
控制器：“appcontroller”
})

---

请帮助我了解视图未被替换的原因。

这可能是因为您有3个不同的ion nav视图标记，每个标记都有一个单独的名称，每个状态仅替换其特定的标记名称。 这意味着即使您的视图被注入，它们也会重叠（这可能就是为什么您没有看到视图在重叠时发生变化的原因）

您应该更改：

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>

---

为什么要为每个页面状态添加命名视图？当我单击某个特定按钮时，与该状态相关的视图将被激活。因此，激活的视图将被替换。父应用程序状态定义在哪里？@LeandroZubrezki:我已经添加了app.js。为什么要在app.js中定义应用程序，在pages.js中定义页面？是否包括page.js文件？Al因此，您不需要三个不同的视图，只需要一个视图，如果没有名称，它将被您选择的视图替换。

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

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'
        }
    }
})
});