Angular JS：如何从它的指令之外打开一个选项卡

Question

我关注了一个tutorial on creating tabs in angular, please see a simplified plunkr of my actual code here: https://embed.plnkr.co/ysWI0pSeBVGEi8Iok2mY/

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

最好的方法是什么？

我是 angular（第一个项目）的新手，非常感谢任何帮助！

谢谢

Answer 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

Angular JS：如何从它的指令之外打开一个选项卡

Angular JS: How to open a tab from outside it's directive

javascript

tabs

scope

using-directives

angularjs