twitter-bootstrap 如何使用 ng-show/ng-hide 在 Angular Bootstrap UI 中隐藏选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19056550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide a tab in Angular Bootstrap UI using ng-show/ng-hide
提问by user1669811
I am using Angular Bootstrap UI to show a tabset. The script I include is ui-bootstrap-tpls-0.6.0.min.js and some template html files.
我正在使用 Angular Bootstrap UI 来显示标签集。我包含的脚本是 ui-bootstrap-tpls-0.6.0.min.js 和一些模板 html 文件。
here is my markup:
这是我的标记：
<tabset>
<tab ng-hide="!hideme">
<tab-heading>
tab1
</tab-heading>
<div>
tab content 1
</div>
</tab>
<tab ng-hide="hideme">
<tab-heading>
tab2
</tab-heading>
<div>
tab content 2
</div>
</tab>
</tabset>
here is my controller
这是我的控制器
function myController($scope) {
$scope.hideme = true;
});
This code does not work (the 2nd tab does not hide). What is the catch to apply ng attribute to a custom directive?
此代码不起作用（第二个选项卡不隐藏）。将 ng 属性应用于自定义指令的关键是什么？
回答by zs2020
The tabdirective creates a new scope, so need to use $parentto access the model. Try
该tab指令创建了一个新的作用域，因此需要使用它$parent来访问模型。尝试
ng-hide="$parent.hideme"
回答by geniuscarrier
First Solution: Use both ng-show and ng-hide
第一个解决方案：同时使用 ng-show 和 ng-hide
<tabset>
<tab ng-show="hideme">
<tab-heading>
tab1
</tab-heading>
<div>
tab content 1
</div>
</tab>
<tab ng-hide="hideme">
<tab-heading>
tab2
</tab-heading>
<div>
tab content 2
</div>
</tab>
Second Solution: Write a directive
第二种解决方案：编写指令
.directive("hideTab", function() {
return function(scope, elm, attrs) {
scope.$watch(function() {
$(elm).css("display", "none");
});
};
});
