Angularjs单击会发射2次?

时间:2014-09-11 05:41:03

标签: javascript html5 angularjs css3

<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);
}

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

$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次?

3 个答案:

答案 0 :(得分:0)

我希望您从HTML页面获取数据到控制器

在控制器中:

$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服务调用,您才能调用该服务。

答案 1 :(得分:0)

我们必须在应用程序中初始化我们的控制器一次,在上面的问题我初始化我的控制器两次(即在html和app.js文件中),这就是为什么它初始化两次并且所有函数都被调用两次这是完全错误的。

答案 2 :(得分:0)

我遇到了这个问题,然后意识到我在Chrome中同时打开了2个标签,同时运行我的应用。我关闭其中一个,现在完全没问题。我觉得很蠢。