带有输入的标签内的按钮不会触发 ng-click

Question

这是我的代码：

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

"publish()"可以触发，"publishBlog()"不行。ionic会把图标放到.里面，是ionic导致的吗？

Answer 1

在 "label" 标签内，您的点击事件将不起作用，因为标签会覆盖您的按钮点击。

所以，使用 DIV 而不是 label ，这样会很好。

Answer 2

正如 Hardy 所说，您将不得不使用 div 而不是 label。但是您将需要使用 $event.stopPropagation(); 来确保只有 publishBlog() 被调用。如果没有 $event.stopPropagation();，这两个函数都会被调用。

所以，这是一个示例实现：

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

你的控制器：

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

这是一个演示：http://play.ionic.io/app/1b82ce25ca44

带有输入的标签内的按钮不会触发 ng-click

Button inside the label with the input does not trigger ng-click

angularjs

ionic-framework

ionic