Nút bên trong nhãn với đầu vào không kích hoạt ng-click

Question

Đó là mã của tôi:.

<label class="item item-input " style="height: 10%" ng-click="publish()"> 
<input type="text" placeholder="Title" ng-model="title"> 
<i ng-click="publishBlog()" class="button button-clear icon ion-paper-airplane padding-right"></i> 
</label> 

Các "xuất bản()" có thể được kích hoạt, nhưng không phải là "publishBlog()" Các ion sẽ đặt biểu tượng vào. Các ion gây ra nó?

Answer 1

trong thẻ "nhãn" sự kiện nhấp của bạn sẽ không hoạt động vì nhãn ghi đè nhấp chuột vào nút của bạn.

vì vậy, hãy sử dụng DIV thay vì nhãn, điều đó sẽ hoạt động tốt.

Answer 2

Vì Hardy cho biết, bạn sẽ phải sử dụng div thay vì label. Nhưng bạn sẽ được yêu cầu sử dụng $event.stopPropagation(); để đảm bảo chỉ được gọi publishBlog(). Nếu không có $event.stopPropagation();, cả hai chức năng sẽ được gọi.

Vì vậy, đây là một việc thực hiện mẫu:

<ion-content class="padding" ng-controller="my"> 
    <div class="item item-input " style="height: 10%" ng-click="publish($event)"> 
     <input type="text" placeholder="Title" ng-model="title"> 
     <i ng-click="publishBlog($event)" class="button button-clear icon ion-paper-airplane padding-right"></i> 
    </div> 
</ion-content> 

Và điều khiển của bạn:

.controller("my", function($scope){ 
    $scope.publish = function($event) { 
     alert("title"); 
    }; 
    $scope.publishBlog = function ($event) { 
     $event.stopPropagation(); 
     alert("icon"); 
    };  
}); 

Dưới đây là một bản demo: http://play.ionic.io/app/1b82ce25ca44