Question

在这里使用Ionic和AngularJS。

所以我的应用程序是一个标签式应用程序，我的tabs.html文件看起来像这样：

<ion-view> 
    <ion-nav-bar class="bar-positive" align-title="center">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-tabs class="tabs-icon-top" ng-controller="TabsCtrl" ng-class="{'tabs-item-hide': hideTabs}">
        <ion-tab title="TITLE 1" href="#/tabs/page1">
            <ion-nav-view name="page1-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="TITLE 2" href="#/tabs/ge2">
            <ion-nav-view name="ge2-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="TITLE 3" href="#/tabs/page3">
            <ion-nav-view name="3-tab"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</ion-view>

然后其中一个标签页的顶部如下所示：

<ion-view view-title="TITLE 1">
    <ion-nav-buttons side="left">
        <button class="button icon ion-search"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button icon ion-compose"></button>
    </ion-nav-buttons>
    ...
    ...
    ...
</ion-view>

我想要在view-title添加ng-click。我已向ion-nav-bar添加了ng-click，但这会覆盖视图中ion-nav-buttons上的点击。

当我点击页面上导航栏的中间时，我只想点击它。

任何帮助表示感谢。

Answer 1

事件从孩子到父母一起冒泡。这是一个简洁的功能，有时会派上用场。但是，它也可能会产生类似您所描述的问题。为了解决这个问题，我们需要确保点击事件在孩子处停止并且不会冒泡。在ng-click功能上添加以下行：

$event.stopPropagation();

有关事件传播的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

那应该给你一般的想法。

如何将ng-click添加到已声明的Ionic导航栏？

1 个答案: