0

无法将 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>

用于替换视图的 js 文件。在 page.controller.js 中没有任何内容。刚刚用 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'
                        })

请帮助我理解为什么视图没有被替换。

4

1 回答 1

0

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

你应该改变：

索引.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'
        }
    }
})
});
于 2015-12-16T14:25:04.593 回答