Angular JS：如何从指令外部打开选项卡答案

【问题标题】：Angular JS: How to open a tab from outside it's directiveAngular JS：如何从指令外部打开选项卡
【发布时间】：2016-06-28 14:17:10
【问题描述】：

我遵循tutorial 以角度创建选项卡，请在此处查看我的实际代码的简化 plunkr：https://embed.plnkr.co/ysWI0pSeBVGEi8Iok2mY/

我的选项卡运行良好，我可以在它们之间切换，但是我现在想从指令外部将选项卡设置为活动状态（请参阅 plunkr 中的按钮）。

最好的方法是什么？

我对 Angular（第一个项目）非常陌生，因此非常感谢任何帮助！

谢谢

【问题讨论】：

标签： javascript angularjs scope tabs using-directives

【解决方案1】：

在 Angular 中控制事物的方式是通过模型。因此，您在外部作用域中添加一个变量来保存选定的选项卡索引并将其传递给选项卡集：

<tabset selected-index="selectedTabIndex">

按钮设置这个变量：

<button class="open-tab-1" ng-click="selectedTabIndex = 0">Open Tab 1</button>
<button class="open-tab-2" ng-click="selectedTabIndex = 1">Open Tab 2</button>

（我正在使用一个临时变量 selectedTabIndex 并且我直接通过 ng-click 进行操作。这是为了本示例的简单起见；我宁愿将变量放在控制器中并通过控制器功能。）

现在标签集必须理解新属性。将其添加到范围定义中（因为您使用的是 Angular 1.5，最好是单向绑定）：

scope: {
  selectedIndex: '<'
},

以及处理selectedIndex中更改的代码，即激活给定索引处的选项卡，停用所有其他选项卡；我正在使用Object.defineProperty 减少手表：

  var _selectedIndex = 0;
  Object.defineProperty(this, 'selectedIndex', {
    get: function() {
      return _selectedIndex;
    },
    set: function(val) {
      if( typeof val === 'number' ) {
        _selectedIndex = val;
        for( var i=0; i < self.tabs.length; i++ ) {
          self.tabs[i].active = (i === val);
        }
      }
    }
  });

这也可以用手表来写：

  $scope.$watch('tabset.selectedIndex', function(newval, oldval) {
    if( newval !== oldval ) {
      for( var i=0; i < self.tabs.length; i++ ) {
        self.tabs[i].active = (i === newval);
      }
    }
  });

一个笨蛋：http://plnkr.co/edit/5LVLZ3zJPBNRddpsUs20?p=preview

【讨论】：