单击bootstrap 4选项卡链接会导致angularJS控制器刷新

是因为在bootstrap 4中，选项卡被设计为通过切换CSS类来显示和隐藏内容，而不是使用JavaScript来处理。

当单击选项卡链接时，会触发浏览器默认的页面跳转行为，这将导致页面刷新，angularJS控制器也会重新初始化。

解决这个问题的方法是使用angularJS的ng-click指令来替代bootstrap 4中的选项卡链接。通过ng-click指令，可以在单击选项卡时执行自定义的JavaScript代码，而不会触发页面跳转。

下面是一个示例代码：

HTML代码：

<div ng-controller="TabController">
  <ul class="nav nav-tabs">
    <li ng-class="{ 'active': activeTab === 1 }">
      <a href="#" ng-click="changeTab(1)">Tab 1</a>
    </li>
    <li ng-class="{ 'active': activeTab === 2 }">
      <a href="#" ng-click="changeTab(2)">Tab 2</a>
    </li>
  </ul>

  <div ng-show="activeTab === 1">
    <!-- Tab 1 内容 -->
  </div>
  <div ng-show="activeTab === 2">
    <!-- Tab 2 内容 -->
  </div>
</div>

JavaScript代码：

angular.module('myApp', [])
  .controller('TabController', function($scope) {
    $scope.activeTab = 1;

    $scope.changeTab = function(tabIndex) {
      $scope.activeTab = tabIndex;
    };
  });

在上面的代码中，我们使用ng-click指令和ng-show指令来实现选项卡的切换效果。通过ng-click指令调用changeTab函数来改变activeTab的值，从而显示或隐藏相应的选项卡内容。

这样，当单击选项卡时，不会触发页面刷新，angularJS控制器也不会重新初始化。

腾讯云相关产品和产品介绍链接地址：