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

Question

That's my code:

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

The "publish()" can be triggered,but not the "publishBlog()".The ionic will put the icon into the .Does the ionic cause it?

Answer 1

within "label" tag your click event will not work, because label is overriding your button click.

so, use DIV instead of label , that will work fine.

Answer 2

As Hardy said, you will have to use div instead of label. But you will be required to use $event.stopPropagation(); to make sure only publishBlog() gets called. Without $event.stopPropagation();, both the functions will get called.

So, here's a sample implementation:

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

And your controller:

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

Here's a demo: http://play.ionic.io/app/1b82ce25ca44