[英]Bootstrap issue with dropdown toggle in Angular app
I am using the Bootstrap library and when I click the dropdown-toggle class this will show/hide the dropdown as expected (hence why its called toggle). 我正在使用Bootstrap库,当我单击dropdown-toggle类时,它将按预期显示/隐藏该下拉列表(因此称其为toggle)。
If I click the the image at the bottom of the HTML snippet this will activate the ng-click angular directive found in the javascript code. 如果单击HTML代码段底部的图像,这将激活javascript代码中的ng-click angular指令。
This code simply does a check to see if the dropdown menu is displayed by checking to see if the .dropdown class has a class of 'open'. 这段代码只是通过检查.dropdown类是否具有“ open”类来检查是否显示了下拉菜单。 If not, then it will open the url passed in a new window, otherwise it will remove the 'open' class which hides the dropdown menu. 如果不是,则它将打开在新窗口中传递的url,否则它将删除隐藏下拉菜单的'open'类。
The issue I have is if I try to click the same .dropdown class to activate the dropdown again it only appears after I click two more times?? 我遇到的问题是,如果我尝试单击相同的.dropdown类以再次激活该下拉菜单,则它仅在我单击两次以上之后才会出现?
I'm obviously not doing the correct way to destroy the dropdown by removing the 'open' class can anyone suggest what I am doing wrong? 我显然不是在通过删除“开放”类来破坏下拉列表的正确方法,没人可以暗示我做错了什么吗? If i don't click the image (and therefore not activate the ng-click this all works fine), so the issue is related to the doInteractionBodyEvent() and somehow i'm not 'destroying' the dropdown correctly. 如果我不单击图像(因此不激活ng-click,则一切正常),因此问题与doInteractionBodyEvent()有关,并且某种程度上我没有正确地“破坏”下拉列表。
// HTML // HTML
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<div>
<div ng-if="interaction.media[0].image" class="image">
<a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
<img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
</a>
</div>
</div>
// Javascript Angular Controller // Javascript Angular控制器
$scope.doInteractionBodyEvent = function(url) {
if (angular.element('.dropdown').hasClass('open')) {
angular.element('.dropdown').removeClass('open');
} else {
$window.open(url, '_blank');
}
}
Remove the data-toggle="dropdown" from the HTML 从HTML删除data-toggle =“ dropdown”
<div class="dropdown-toggle" type="button" id="dropdown1" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.