javascript - Angularjs 单击会触发 2 次？

Question

<button id="voterListSearchButton" class="serachButton" ng-click="onSearchButton1Click()">search</button>

这是我的搜索按钮:

$scope.onSearchButton1Click = function() {
    var partId = $("#partIdSearch").val();
    var firstName = $("#firstNameSearch").val();
    var lastName = $("#lastNameSearch").val();
    var fathersName = $("#fathersNameSearch").val();
    var address = $("#address").val();
    $rootScope.$broadcast('onSearchButton1Click',partId,firstName,fathersName,lastName,address);
}

这是我的上述按钮的 Controller 。我通过以下方式将此事件广播到另一个 Controller :

$scope.$on('onSearchButton1Click',function(event,data1,data2,data3,data4,data5){
    pId= data1;
    fname=data2;
    lname=data3;
    fathersName=data4;
    address= data5;

    VoterDataService.search(data1,data2,data3,data4,data5,0).success(function(response){
        $scope.arr = response.search;    
    });
});

这是我的服务代码:

voterDataServiceAPI.search = function(data1,data2,data3,data4,data5,pageNo,lang) {
    var url ="api/search" + "?part_id="+data1 +"&first_name="+data2+"&middle_name="+data3+"&last_name="+data4+"&subpart=" + data5 +"&page_no="+pageNo;
    return $http({
        method : "GET",
        url:url,
        headers:{
            "content-type": "application/json"
        }
    });
}

为什么单击会触发 2 次？

Answer 1

我希望你能从 HTML 页面获取数据到 Controller

在 Controller 中:

$scope.onSearchButton1Click = function() {
        var partId = $("#partIdSearch").val();
        var firstName = $("#firstNameSearch").val();
        var lastName = $("#lastNameSearch").val();
        var fathersName = $("#fathersNameSearch").val();
        var address = $("#address").val();

     //calling the service 
     var url ="api/search" + "?part_id="+data1 +"&first_name="+data2+"&middle_name="+data3+"&last_name="+data4+"&subpart=" + data5 +"&page_no="+pageNo;

     // alert("url"+url);

        $http({
                    method: 'GET',
                    url: url ,
                    headers: { 
                        'Accept': 'application/json',
                        'Content-Type': 'application/json' 
                    },
                }).
                success(function (data) {
                    if(data != null && data.length > 0){
                       $log.info("It is in success of onSearchButton1Click()  -------");                  
                       $scope.searchResult = angular.fromJson(data);
                      $log.info("searchResult Details==============> "+JSON.stringify($scope.searchResult ));
                     }else{
                          $log.info("searchResult=> in else:"+$scope.searchResult .length);

                      }

                }).
                error(function(data, status, headers, config) {

                     $log.info("searchResultUrl=> FAILURE:");

                });



}

通过这种方式，只要用户单击搜索按钮，您就可以调用该服务，而无需外部不必要的 Web 服务调用。