angular.js - What should I do if the click event of the button button contained in the label tag in angular (ionic) is invalid?

Question

My needs are like this. I want to add a search icon in the search box and be able to click to search
So I started to do it step by step according to the idea. Here is my code

//myController
<label class="item item-input">
        <input class="cft-textField" type="text" placeholder="例：大闸蟹" >
        <button class="ctf-search-btn" ng-click="dianji()"></button>
</label>

angular.module('myApp',['ionic'])
        .controller('myController',myController);

    function myController($scope) {
        $scope.dianji = function () {
            console.log('hello')
        }
}

After writing, I found that clicking the button is invalid. It is effective without using ionic or angular environment. Also, when clicking the button, the cursor will focus on the search box. What is going on? Please give me some answers from all the experts. It’s very helpful. Thanks

Answer 1

The label problem has nothing to do with the angular/ionic environment.
Put the button outside the label or replace the label with p

Answer 2

It can be used
http://runjs.cn/code/3ynzz3jv