如何从外部控制器中选择一个选项卡

Question

我正在使用Tabs (ui.bootstrap.tabs) 控制\指令描述here。该控件创建它自己的控制器来设置活动选项卡：

.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
  var ctrl = this,
      tabs = ctrl.tabs = $scope.tabs = [];

  ctrl.select = function(selectedTab) {
    angular.forEach(tabs, function(tab) {
      if (tab.active && tab !== selectedTab) {
        tab.active = false;
        tab.onDeselect();
      }
    });
    selectedTab.active = true;
    selectedTab.onSelect();
  };

Tabset 子选项卡控件（子元素）在点击时可以触发父级的选择功能。

.directive('tab', ['$parse', function($parse) {
  return {
    require: '^tabset',
    scope: {
      onSelect: '&select',

我有我的自定义控制器向上的 DOM 需要触发 TabsetController 上的 select 函数以设置第一个选项卡处于活动状态。我读过我可以使用事件广播，但我不能修改TabsetController 来绑定事件监听器，所以这似乎不是一个可行的选择。有什么建议吗？

编辑：

请参阅 Plunker 以获得更好的理解 - here。

Answer 1

您可以在“父”控制器中声明范围属性，并且可以在子控制器中访问它。 见：AngularJS - Access to child scope

由于 TabsetController 设置在子 DOM 元素上，而 MainController 设置在父元素上，您可以在 MainController 中定义和操作 $scope.tabs，它会在 TabsetController 中看到和解释。