angular-ui-bootstrap, 마지막 탭 제거, 전체 페이지 새로 고침

uib-tab-heading에서 탭을 제거하기 위해 ng-click 이벤트를 추가했습니다. 모든 것이 정상 이었지만 마지막 탭을 제거하면 전체 페이지 예상하지 못한 내용이 새로 고쳐졌습니다. 이것은 내 코드입니다 : http://embed.plnkr.co/f0p9uZgKuWTNh3Ss7okY.angular-ui-bootstrap, 마지막 탭 제거, 전체 페이지 새로 고침

HTML

<head> 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" /> 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div ng-controller="TabsDemoCtrl"> 
     <uib-tabset active="active"> 
     <uib-tab index="0" heading="Static title">Static content</uib-tab> 
     <uib-tab index="$index+1" ng-repeat="tab in tabs track by $index"> 
      <uib-tab-heading> 
        {{tab.title}} 
       <div class="close" aria-label="Close" ng-click="remove($index)"> 
       <span aria-hidden="true">×</span> 
      </div> 
      <!--<div style="width: 10px; height: 10px; background-color: red;" ng-click="removeTab($index)"></div>--> 
      </uib-tab-heading> 


       {{tab.content}} 
      </uib-tab> 
     </uib-tabset> 
    </div> 
    </body> 

</html>

JS 도와

angular.module('app', ['ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) { 
    $scope.tabs = [{ 
      title: 'Dynamic Title 1', 
      content: 'Dynamic content 1' 
     }, 
     { 
      title: 'Dynamic Title 2', 
      content: 'Dynamic content 2', 
     }, 
     { 
      title: 'Dynamic Title 3', 
      content: 'Dynamic content 3', 
     }, 
     { 
      title: 'Dynamic Title 4', 
      content: 'Dynamic content 4', 
     } 
    ]; 

    $scope.remove = function (index) { 
     $scope.tabs.splice(index, 1); 
     $scope.active = $scope.tabs.length; 
    }; 
});

감사합니다.

출처

2017-05-03 Yestin Tian

<uib-tab-heading> 자체는 <a> 태그로 싸여 있으므로 기본 링크 클릭 동작으로 인해 페이지가 새로 고침되는 것처럼 보입니다.

당신은에 의해 제공되는 $ 이벤트 객체로 재생해야

<div ng-click="remove($index, $event)"> 

$scope.remove = function(index, event){ 
    event.preventDefault(); 
    ... 
}

출처

2017-05-03 14:51:42

문서로 ng를 클릭 마십시오

는 말한다 : https://docs.angularjs.org/api/ng/directive/ngClick

HTML :

ng-click="remove($index, $event)"

$scope.remove = function (index, e) { 
    $scope.tabs.splice(index, 1); 
    $scope.active = $scope.tabs.length; 
    e.preventDefault(); 
};

다음은 코드를 사용한 작업 예제입니다. https://plnkr.co/edit/QXzi1pZb4njydXMo01QA?p=preview

출처

2017-05-03 14:56:32

angular-ui-bootstrap, 마지막 탭 제거, 전체 페이지 새로 고침

답변

관련 문제