我试图在标题栏的右侧添加一个按钮,按钮显示,但ng-click不会被触发,如果我在离子内容中移动按钮,它开始工作,只是不在标题中工作.
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');
- }
- })
请确保在app的根控制器中定义了createTrip,并且还注意,默认情况下,ion-header-bar不会侦听click事件.如果你想在ion-header-bar中绑定click事件,你必须将目标元素包装在ion-header-bar的button块中.
- <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>