Question

我有一些问题。我真的不明白它是如何工作的。

在app.js中，我创建了这样的状态：

`...
 .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            controller: 'AppController',
            templateUrl: "templates/menu.html"
        })
        .state('app.search', {
            url: '/search',
            views: {
                'searchContent' : '<h1>ANTOHER CONTENT</h1>',
                'menuContent': {
                    templateUrl: 'templates/test.html',
                    controller: 'TestController'
                }
            }
        })
...`

你可以看到两个视图“searchContent”和“menuContent”。然后我创建了两个模板：

在这个模板中，对于标签，我在app.js中添加了两个名字 menu.html：

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable" name="searchContent">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Left</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close href="#/app/search">
                    Search
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

的test.html：

<ion-view>
    <ion-content>
        Some content
    </ion-content>
</ion-view>

的index.html：

...
    <body ng-app="starter">
        <ion-nav-view></ion-nav-view>
    </body>
...

但在搜索页面上，searchContent不会被“<h1>ANTOHER CONTENT</h1>”取代。如何解决这个问题？

Answer 1

首先，<ion-nav-bar></ion-nav-bar>不用于渲染视图和内容，而是用于顶部导航。视图适用于<ion-view> or <ion-nav-view>

其次，在我看来......一种观点就足够了。我不确定你想要用第一个内容实现什么，但如果你只是想改变页面的标题，你可以试试这个......

<ion-nav-bar class="bar-stable" name="searchContent">
    <ion-nav-back-button>
    </ion-nav-back-button>

    <h1>ANTOHER CONTENT</h1>

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
    </ion-nav-buttons>
</ion-nav-bar>

OR

在test.html或您想要的任何网页中使用<ion-nav-title></ion-nav-title> ... http://ionicframework.com/docs/api/directive/ionNavTitle/

希望这有帮助！：d

离子替换搜索页面中的菜单标题内容

1 个答案: