与任何使用 AngularJS 创建 Web 应用程序的普通人一样，我最初尝试使用 ng-hide/ng-show 使某些元素在某些条件下可见。出于某种原因，这不想工作，而且代码太复杂了，我无法在这里重述。我认为使用 jQuery 会很容易（或者至少与 Angular 内置的 jQuery 一样多）。这是我目前所拥有的：
angular.element(document.querySelector([ELEMENT ID])).off();
上面的行用于隐藏，但我永远无法取回它。如果您想知道，我正在尝试隐藏其他不相关操作的按钮。对上面的代码使用“.on()”是行不通的。为了使元素消失，需要如何编写这一行？更重要的是，如何让它重新出现？
【问题讨论】：
标签： javascript jquery angularjs html jqlite
ng-show 和 ng-hide 使用布尔值。不要在控制器中使用 jQuery。如果您需要使用它，请为此目的创建指令。
在控制器范围内创建标志变量。将其设置为true 或false
现在 ng-show 将在收到布尔值为 true 时显示元素，如果收到 false 则隐藏。
ng-hide 反之亦然，收到 true 时隐藏，收到 false 时显示。
所以在其中一个之间做出决定，不要同时使用。因此，考虑到标志名称处于活动状态并且它设置为 true 并且您希望在开始时显示按钮。代码可以是：
angular.module('demo', []).controller('DemoCtrl', function($scope){
$scope.active = true;
});
模板看起来像：
<div ng-app="demo">
<div ng-controller="DemoCtrl">
<button type="button" ng-click="active = false" ng-show="active">Hide Me</button>
<button type="button" ng-click="active = true" ng-hide="active">Reset</button>
</div>
</div>
【讨论】：
为此，我们需要一个小的 css：
.display-hide {
display: none;
}
假设我们在页面上显示了一个验证摘要；
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
@Html.ValidationSummary(false)
</span>
</div>
使用 jQuery;
jQuery(document).ready(function () {
@if(!ViewData.ModelState.IsValid) {
<text>
$('.alert span').parent().removeClass("display-hide");
</text>
}
else
{
<text>
$('.alert span').parent().addClass("display-hide");
</text>
}
});
您可以对任何 html 元素使用此技巧。
【讨论】：
on 和 off 方法不是用于显示/隐藏元素，而是用于添加和删除事件侦听器。我想你的元素已经被隐藏了，这让你相信off隐藏元素。
如果你真的不能使用ng-hide/ng-show，我建议你使用addClass 和removeClass（而不是off 和on）来为你的元素添加/删除“隐藏”类。此类可以将元素 display 设置为 none。
不过，我鼓励您展示 Angular 代码，以便我们使用 ng-show 帮助您解决此问题。
【讨论】：