angularjs – ng-click在离子标题按钮中不起作用

前端之家收集整理的这篇文章主要介绍了angularjs – ng-click在离子标题按钮中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在标题栏的右侧添加一个按钮,按钮显示,但ng-click不会被触发,如果我在离子内容中移动按钮,它开始工作,只是不在标题中工作.

HTML

  1. <ion-view>
  2. <ion-nav-bar class="bar-stable nav-title-slide-ios7" >
  3. <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
  4. </ion-nav-back-button>
  5. </ion-nav-bar>
  6. <ion-header-bar>
  7. <h1 class="title">Trips</h1>
  8. <div class="buttons pull-right"><button class="button button-icon icon ion-plus" ng-click="createTrip()"></button></div>
  9. </ion-header-bar>
  10.  
  11. <ion-content>
  12.  
  13. </ion-content>
  14. </ion-view>

JS:

  1. .controller('TripCtrl',function($scope,$location,$localStorage){
  2. console.log('inside TripCtrl');
  3.  
  4. $scope.$storage = $localStorage;
  5.  
  6. var random1 = {
  7. name : 'random name 1',text : 'random text 1'
  8. }
  9.  
  10. var random2 = {
  11. name : 'random name 2',text : 'random text 2'
  12. }
  13.  
  14. $scope.trips = [];
  15. $scope.trips.push(random1);
  16. $scope.trips.push(random2);
  17.  
  18.  
  19. $scope.createTrip = function(){
  20. console.log('clicked create new');
  21. $location.path('/createTrip');
  22. }
  23. })
请确保在app的根控制器中定义了createTrip,并且还注意,默认情况下,ion-header-bar不会侦听click事件.如果你想在ion-header-bar中绑定click事件,你必须将目标元素包装在ion-header-bar的button块中.
  1. <ion-header-bar align-title="left" class="bar-positive">
  2. <div class="buttons">
  3. <button class="button" ng-click="doSomething()">Left Button</button>
  4. </div>
  5. <h1 class="title">Title!</h1>
  6. <div class="buttons">
  7. <button class="button">Right Button</button>
  8. </div>
  9. </ion-header-bar>

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

猜你在找的Angularjs相关文章