angular-ui-bootstrap，去掉最后一个tab，整个页面都刷新了答案

【问题标题】：angular-ui-bootstrap, remove the last tab, the whole page was refreshedangular-ui-bootstrap，去掉最后一个tab，整个页面都刷新了
【发布时间】：2017-05-03 14:44:34
【问题描述】：

我添加了 ng-click 事件以删除 uib-tab-heading 中的选项卡。一切正常，但是当我删除最后一个选项卡时，整个页面都刷新了，这是意料之外的。这是我的代码：http://embed.plnkr.co/f0p9uZgKuWTNh3Ss7okY。

html

  <head>
    <link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <script data-require="angularjs@1.6.2" 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>

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

感谢您的帮助。

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui

【解决方案1】：

<uib-tab-heading> 本身被<a> 标签包裹，所以看起来页面刷新是由于默认的链接点击操作。

做

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

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

【讨论】：

【解决方案2】：

您需要使用 ng-click 提供的 $event 对象，如文档所述：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

【讨论】：