[英]Angular/Bootstrap: ng-hide not working properly
I'm having trouble understanding the ng-show angular directive, it is not working correctly for me. 我在理解ng-show angular指令时遇到问题,它对我来说无法正常工作。 I can't get the boolean value to change in the controller like some examples I've seen online. 我无法像在网上看到的一些示例那样在控制器中更改布尔值来进行更改。 Rather than use the tabs javascript I decided to try and implement a simple angular show and hide for the tabs. 我决定不使用标签JavaScript,而是尝试对标签实施简单的角度显示和隐藏。 However I have checked many examples on the web and I can't find out what is going wrong. 但是,我已经在网上检查了很多示例,但找不到错误所在。 Nothing is showing up at all from the divs. div没有任何显示。
<div class="row" ng-controller="ExtractionTabsCtrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active"><a href="#">Titles</a></li>
<li id="contacts"><a href="#">Contacts</a></li>
<li id="writers"><a href="#">Writers</a></li>
<li id="files"><a href="#">Files</a></li>
<li id="companies"><a href="#">Companies</a></li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
and my JS side 和我的JS方面
MPWAdminControllers.controller("ExtractionTabsCtrl",["$scope", function($scope){
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
$('#contacts a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=true;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#writers a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=true;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#files a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=true;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#companies a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=true;
})
$('#titles a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
})
}]);
Simply Trying to flip the show value on each div whenever a tab is selected. 只需尝试在选择选项卡时翻转每个div上的显示值即可。 I have a feeling it might have to do with mixing jquery and angular but Im not sure. 我觉得这可能与混合jquery和angular有关,但我不确定。
Thanks James 谢谢詹姆斯
Based on where you defined your controller, the ng-show directive is not in the same scope as the links you've defined. 根据定义控制器的位置,ng-show指令与定义的链接不在同一范围内。 You need to change your where the definition of the controller is like so: 您需要更改控制器定义的位置,如下所示:
<div class="container" ng-controller="ExtractionTabsCtrl">
<div class="row">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active"><a href ng-click="test()">Titles</a></li>
<li id="contacts"><a href="#">Contacts</a></li>
<li id="writers"><a href="#">Writers</a></li>
<li id="files"><a href="#">Files</a></li>
<li id="companies"><a href="#">Companies</a></li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
</div>
You'll notice I added a wrapper around your row and subsequent divs. 您会注意到我在您的行和随后的div周围添加了一个包装器。 The wrapping div is now the total scope of your controller, instead of just the ul
. 现在,包装div是控制器的总范围,而不仅仅是ul
。
You are trying to mix JQuery and AngularJS where you would probably be fine with just AngularJS, this should definitely work. 您正在尝试将JQuery和AngularJS混合在一起,而仅使用AngularJS可能会很好,这肯定可以工作。
HTML 的HTML
<li id="contacts"><a ng-click="ShowContacts()">Contacts</a></li>
..
Javascript Java脚本
$scope.ShowContacts = function()
{
$scope.contactsdiv = true;
.....
Just fill in with the rest of your code. 只需填写其余代码即可。
ng-click is an easier way then defining JQuery on click events. ng-click是一种在click事件上定义JQuery的简便方法。 It will execute whatever Javascript you put inside of it and is overall cleaner. 它将执行您放入其中的任何Javascript,并且总体上更干净。
You can also move the ng-click to the li tag which would eliminate your need for the a tag to begin with. 您也可以将ng-click移至li标签,这样一来您就不需要标签了。
Edit: 编辑:
Like the previous answer said, you need to extend the controller div to include what your changing. 就像之前的回答一样,您需要扩展controller div以包括您所做的更改。 I missed that, what you have with JQuery should work then, but ng-click will be much cleaner regardless. 我错过了,然后使用JQuery 可以正常工作,但是无论如何ng-click都会更干净。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.