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

Question

我遵循了一个有关在角度创建选项卡的教程，请在此处查看我实际代码的简化plunkr：https：//embed.plnkr.co/yswi0psebvgei8iok2my/

我的标签工作很棒，我可以在它们之间切换，但是我现在想将标签设置为从指令外部的活动（请参阅plunkr中的按钮）。

最好的方法是什么？

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

谢谢

Answer 1

通过模型控制事物的方法。因此，您在外部范围中添加一个变量，该变量保存选定的选项卡索引并将其传递到选项卡集：

<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，最好是1向绑定）：

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);
      }
    }
  });

a plunk：http：//plnkr.co/edit/5lvlz3zjpbnrddpsus20?p=Preview