ng-click nie działa w jonowym przycisku nagłówka

Question

Próbuję dodać przycisk po prawej stronie paska nagłówka, przycisk jest wyświetlany, ale ng-kliknięcie nie zostaje wywołane, jeśli przestawię przycisk wewnątrz jonu -content, zaczyna działać, po prostu nie działa w nagłówku.

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

Answer 1

Zrobiłem coś podobnego, jednak używam ui-sref, aby przejść bezpośrednio do mojego częściowe. Domyślam się, że musisz dodać ten kontroler do swojego nagłówka, w ten sposób zostanie uruchomiony na dowolnym ekranie (podobnie jak przycisk Wstecz).

Answer 2

Upewnij się, że zdefiniowano createTrip w głównym kontrolerze aplikacji, a także zauważ, że nagłówek jonów domyślnie nie nasłuchuje zdarzenia kliknięcia. Jeśli chcesz powiązać zdarzenie click wewnątrz paska nagłówka, musisz owinąć element docelowy wewnątrz bloku przycisków paska nagłówka jonów.

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