提问人：ViciousKitten 提问时间：6/28/2016 更新时间：6/28/2016 访问量：179
Angular JS：如何从指令外部打开选项卡
Angular JS: How to open a tab from outside it's directive
问：
我已经遵循了在 angular 中创建选项卡的教程，请在此处查看我实际代码的简化 plunkr：https://embed.plnkr.co/ysWI0pSeBVGEi8Iok2mY/
我的选项卡运行良好，我可以在它们之间切换，但是我现在想将选项卡设置为从指令外部激活（请参阅 plunkr 中的按钮）。
最好的方法是什么？
我对angular（第一个项目）非常陌生，所以非常感谢任何帮助！
谢谢
答：
0赞
Nikos Paraskevopoulos
6/28/2016
#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>
（我正在使用一个临时变量，我直接通过 .这是为了简单起见，此示例;我宁愿将变量放在控制器中并通过控制器函数操作它。selectedTabIndexng-click
现在，选项卡集必须了解新属性。将其添加到范围定义中（因为您使用的是 Angular 1.5，最好是 1 向绑定）：
scope: {
selectedIndex: '<'
},
以及处理 中更改的代码，即激活给定索引处的选项卡，停用所有其他索引;我正在用减少手表：selectedIndexObject.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);
}
}
});
一个 plunk： http://plnkr.co/edit/5LVLZ3zJPBNRddpsUs20?p=preview
下一个：Angular 实现指令
评论