Question

我想在点击标签时重新加载我的标签控制器。代码是

$scope.tabs = [
  {
    id: 'tab1',
    title: 'tab1',
    icon: 'comments',
    templateUrl: 'tab1/tab1.tpl.html',
    load: true
  },
  {
    id: 'tab2',
    title: 'tab2',
    icon: 'user',
    templateUrl: 'tab2/tab2.tpl.html',
    load: false
  }
];

var activeTab = $scope.tabs[0].id;

$scope.selectTab = function(tab) {
  if (!tab.load) {
    tab.load = true;
  }
  activeTab = tab.id;
};

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

单击选项卡时，

$scope.selectTab()正在调用。当我切换标签时，我想重新加载标签的控制器。

Answer 1

您尚未透露您的html模板，因此我会尝试猜测它的样子......

控制器中的

：

$scope.activeTab = activeTab;

在html模板中：

<div ng-repeat="tab in tabs">
    <div class="tab-label" ng-click="selectTab(tab)">{{tab.title}}</div>
    <div class="tab-content" ng-if="tab.id === activeTab">Tab content</div>
</div>

另一种方式：

<div ng-repeat="tab in tabs">
    <div class="tab-label" ng-click="selectTab(tab)">{{tab.title}}</div>
</div>

<div class="tab-content">{{tabs.find((tab) => tab.id === activeTab)}}</div>

有更优雅的方式，但它们需要重写整个代码

P.S。 ng-if当其表达式切换为true时完全重新加载containsng元素的内容

Answer 2

为什么需要重新加载控制器？

也许，您想查看AngularJS Directive段落：创建沟通指令

Angular js：每次点击时如何重新加载制表符控制器？

2 个答案: