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（）”。离子会将图标放入。离子导致它吗？

Answer 1

在＆＃34;标签＆＃34;标记您的点击事件将无法正常工作，因为标签会覆盖您的按钮点击。

所以，使用 DIV 代替标签，这样可以正常使用。

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

2 个答案: