ng-click 在离子标题按钮中不起作用答案

【问题标题】：ng-click does not work in ionic header buttonng-click 在离子标题按钮中不起作用
【发布时间】：2015-04-08 18:03:50
【问题描述】：

我正在尝试在标题栏的右侧添加一个按钮，该按钮正在显示，但 ng-click 没有被触发，如果我将按钮移动到 ion-content 内，它开始工作，只是不工作在标题中。

html：

<ion-view>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7" >
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-header-bar>
        <h1 class="title">Trips</h1>
        <div class="buttons pull-right"><button class="button button-icon icon ion-plus" ng-click="createTrip()"></button></div>
    </ion-header-bar>

    <ion-content>

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

js:

.controller('TripCtrl', function($scope, $location, $localStorage){
    console.log('inside TripCtrl');

    $scope.$storage = $localStorage;

    var random1 = {
        name : 'random name 1',
        text : 'random text 1'
    }

    var random2 = {
        name : 'random name 2',
        text : 'random text 2'
    }

    $scope.trips = [];
    $scope.trips.push(random1);
    $scope.trips.push(random2);


    $scope.createTrip = function(){
        console.log('clicked create new');
        $location.path('/createTrip');
    }
})

【问题讨论】：

需要更多代码，哪个控制器正在管理该按钮的点击？从你提供的代码看不清楚

标签： angularjs ionic-framework

【解决方案1】：

我做了类似的事情，但是我使用ui-sref 直接进入我的部分。我的猜测是您需要将该控制器添加到您的标题中，这样它就会在您所在的任何屏幕上触发（就像后退按钮一样）。

【讨论】：

【解决方案2】：

请确保 createTrip 在应用程序的根控制器中定义，并注意默认情况下 ion-header-bar 不监听点击事件。如果要在 ion-header-bar 内绑定点击事件，则必须将目标元素包装在 ion-header-bar 的按钮块内。

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

http://ionicframework.com/docs/api/directive/ionHeaderBar/

【讨论】：