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',

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

修改

请参阅Plunker以便更好地理解 - here。

Answer 1

您可以在＆＃34; parent＆＃34;中声明范围属性。控制器，它将在子控制器中访问。见：AngularJS - Access to child scope

因为TabsetController是在子DOM元素上设置的，而MainController是在父元素上设置的，所以你可以在MainController中定义和操作$ scope.tabs，它将在TabsetController中被看到和解释。

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

1 个答案: