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

Question

I am generating li using ng-repeat and inside that LI i have input type control which has a scope function fn_btnClose .When i am clicking on button button's click event not getting called and instead li's click event gets fired.

I am doing the same thing in js fiddle and it's working there but in my code i am not finding where is the problem.The working fiddle link is

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

The html is as below

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

my Controller scope functions are in same controller and is like this

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

You need to have a stopPropagation() on the button's ng-click:

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