AngularJS：如何实现每次点击标签页时重新加载对应控制器？

我来帮你搞定这个问题～你的现有代码里，load属性只是做了首次加载的标记，一旦设为true就不会再触发重新加载了；而且AngularJS默认会缓存模板，控制器也只会在模板首次渲染时初始化一次，所以切换时不会重新执行控制器逻辑。下面给你两个可行的解决方案：

方案一：清除模板缓存+强制刷新模板URL #

这个方案通过清除Angular的模板缓存，再给模板URL加随机参数绕过浏览器缓存，让每次点击都重新加载模板和对应的控制器：

首先要在控制器里注入$templateCache服务，然后修改代码：

app.controller('YourTabController', function($scope, $templateCache) {
  $scope.tabs = [ 
    { id: 'tab1', title: 'tab1', icon: 'comments', templateUrl: 'tab1/tab1.tpl.html' }, 
    { id: 'tab2', title: 'tab2', icon: 'user', templateUrl: 'tab2/tab2.tpl.html' } 
  ];
  let activeTab = $scope.tabs[0].id;

  $scope.selectTab = function(tab) {
    // 清除当前模板的Angular缓存
    $templateCache.remove(tab.templateUrl);
    // 给模板URL拼接时间戳，强制浏览器重新请求
    tab.templateUrl = tab.templateUrl.split('?')[0] + '?' + Date.now();
    activeTab = tab.id;
  };

  $scope.isActive = function(tabId) {
    return tabId === activeTab;
  };
});

对应的HTML部分（假设你用ng-include渲染标签内容）：

<!-- 标签栏 -->
<div class="tab-bar">
  <button 
    ng-repeat="tab in tabs"
    ng-click="selectTab(tab)"
    ng-class="{active: isActive(tab.id)}"
  >
    <i class="icon-{{tab.icon}}"></i> {{tab.title}}
  </button>
</div>

<!-- 标签内容区 -->
<div class="tab-content">
  <div 
    ng-repeat="tab in tabs"
    ng-if="isActive(tab.id)"
    ng-include="tab.templateUrl"
  ></div>
</div>

方案二：手动销毁旧控制器作用域，重新实例化 #

如果不想动缓存逻辑，这个方案更直接：每次切换标签时，先销毁之前激活标签的控制器作用域，然后重新加载模板并创建新的控制器实例，确保每次点击都执行控制器的初始化代码：

app.controller('YourTabController', function($scope, $controller, $element, $http) {
  $scope.tabs = [ 
    { 
      id: 'tab1', 
      title: 'tab1', 
      icon: 'comments', 
      templateUrl: 'tab1/tab1.tpl.html',
      controller: 'Tab1Controller' // 要指定每个标签对应的控制器名
    }, 
    { 
      id: 'tab2', 
      title: 'tab2', 
      icon: 'user', 
      templateUrl: 'tab2/tab2.tpl.html',
      controller: 'Tab2Controller'
    } 
  ];
  let activeTab = $scope.tabs[0].id;
  let currentTabScope = null;

  $scope.selectTab = function(tab) {
    // 销毁上一个标签的控制器作用域，避免内存泄漏
    if (currentTabScope) {
      currentTabScope.$destroy();
    }

    // 获取标签内容容器并清空
    const contentContainer = $element.find('.tab-content')[0];
    angular.element(contentContainer).empty();

    // 加载模板并实例化新的控制器
    $http.get(tab.templateUrl, { cache: false }).then(response => {
      // 把模板插入容器
      angular.element(contentContainer).html(response.data);
      // 创建新的子作用域
      currentTabScope = $scope.$new();
      // 实例化控制器并绑定到新作用域
      $controller(tab.controller, { $scope: currentTabScope });
      // 把作用域绑定到模板元素上
      angular.element(contentContainer).children().data('$scope', currentTabScope);
    });

    activeTab = tab.id;
  };

  $scope.isActive = function(tabId) {
    return tabId === activeTab;
  };

  // 初始化默认激活的标签
  $scope.selectTab($scope.tabs[0]);
});

关键注意点 #

• Angular的$templateCache会自动缓存已加载的模板，所以必须主动清除或者用随机参数绕过
• 控制器的初始化逻辑只会在作用域创建时执行一次，所以要重新加载就必须销毁旧作用域再创建新的
• 如果用ng-include，确保每次切换时ng-include的URL是变化的，或者通过ng-if强制重新渲染

内容的提问来源于stack exchange，提问作者Ruchi