Question

我正在使用ng-repeat生成li并且在LI里面我有输入类型控件，其具有作用域函数fn_btnClose。当我点击按钮按钮时，点击事件没有被调用而是在li＆＃39; s点击事件被解雇。

我在js小提琴中做同样的事情并且在那里工作但是在我的代码我不知道问题在哪里。工作小提琴链接是

http://jsfiddle.net/rahulrathore1986/udmcv/296/

html如下

<ul id="ulClaimantId" class="TabbedPanelsTabGroup">
    <li ng-repeat="claimantDetail in claimantDetailsList" class="TabbedPanelsTab_01" tabindex="0" id="{{claimantDetail.claimantId}}" tabdata="{{claimantDetail.selectedClaimObject}}" attachedworkgroup="{{claimantDetail.Id}}" firstli="{{claimantDetail.firstLi}}" ng-click="OpenWorkGroupTab(claimantDetail.claimantId);">{{claimantDetail.Id}}
       <input type="image" id="btnClose_{{claimantDetail.Id}}" src="Content/Images/close-popup.png" style="float:right;margin-left:2px;" data-ng-click="fn_btnClose(claimantDetail.claimantId,$event)" >{{claimantDetail.claimantId}}</input>
    </li>
</ul>

我的Controller范围功能在同一控制器中，就像这样

// Function for closing the tab and it will remove the tab from HTML
    $scope.fn_btnClose = function (mint_tabId, e) {
        console.log('fnbtnCclobse');
        if (mint_tabId != undefined) {
            angular.element("#" + mint_tabId).remove();
            //get the corresponding close button id and then remove it
            var close = "btnClose_" + mint_tabId.replace('liClaimant', '');
            angular.element("#" + close).remove();

            var inComingTab = this.findAndRemove($scope.ClaimantArrayList, 'claimantId', mint_tabId.replace('liClaimant', ''));

            //$scope.ClaimantArrayList.splice(mint_tabId.replace('liClaimant', ''), 1);

            if ($scope.ClaimantArrayList.length == 0) {
                //If all tabs are closed then hide claim detail div.
                $('#dvRustClaimantDetail').hide();
                $('#dvBasicFullAdvSearch').show();
            }
            else {
                //populate the data of next claimant tab
                if ($scope.ClaimantArrayList != undefined && $scope.ClaimantArrayList.length > 0) {
                    inComingTab = "liClaimant" + inComingTab;
                    this.fn_populateTabWdObject(angular.fromJson(angular.element('#' + inComingTab).attr('tabdata')),
                                             inComingTab,
                                            angular.element('#' + inComingTab).attr('attachedworkgroup'),
                                            angular.element('#' + inComingTab).attr('firstli'));
                }
            }
        }
        e.stopPropagation();
    }


 ////this function will open the WorkGroup detail div for the tab that has been clicked
    $scope.OpenWorkGroupTab = function (tabId) {
        console.log('OpenWorkGroupTab');
        if (($('#ulClaimantId li').length == 0)) {
            // $('#dvRustClaimantDetail').hide();
            if (tabId == 'liHomeTab') {
                $('#dvBasicFullAdvSearch').show();
            }
            else {
                //$('#dvRustClaimantDetail').hide();
                // $('#dvBasicFullAdvSearch').hide();
            }
            //return false;
        }
        $('#dvRustClaimantDetail').show();
        //Add Close button html for the tabs added
        angular.element('#ulClaimantId li').each(function () {
            var $this = $(this);
            var text = $this.html();
            text = text.replace('&lt;', '<').replace('&gt;', '>');
            $this.html(text);
        });


        $('[tabviewdiv]').hide();
        if (tabId == 'liHomeTab') {
            $('#dvBasicFullAdvSearch').show();
        }
        else {
            var claimantObject = angular.fromJson(angular.element('#' + tabId).attr('tabdata'));
            //check if selected Tab is WorkGroup tab then append ClaimantTabid to tabId argument
            if (tabId.toLowerCase().indexOf('workgroup') > 0) {
                tabId = "liClaimant" + claimantObject.ID;
            }
            //Gets the Claimant Extra Info and Populates the tab Data
            this.ClaimantExtraInformation(claimantObject.ID);
            this.fn_populateTabWdObject(angular.fromJson(angular.element('#' + tabId).attr('tabdata')), tabId,
             angular.element('#' + tabId).attr('attachedworkgroup'),
             angular.element('#' + tabId).attr('firstli'),
             $scope.claimantExtraInfoObject);
        }
    }

Answer 1

你需要在按钮的ng-click上有一个stopPropagation（）：

<li ng-repeat="item in items" ng-click="OpenWorkGroupTab(item);">Text of Li
      <input type="button" value="btn" style="margin-left:1px;" ng-click="fn_btnClose(item,$event);$event.stopPropagation();">
</li>

li元素内的范围函数未被调用

1 个答案: