純JS中的Angular ng-hide指令

Question

在AngularJS中，您可以使用ng-hide隱藏HTML元素。 您將如何使用純JS / jQuery執行此操作？ 如果您有類似<div id="userNotLoggedIn"></div> ，它是$("#userNotLoggedIn").hide()還是$("#userNotLoggedIn").remove()或其他東西？ 目的是如果站點訪問者未以用戶身份登錄，則不允許他們訪問該頁面。

Answer 1

好吧，如果您想實際復制ng-hide，則可以使用jQuery.addClass方法。

ngHide只是監視綁定到其的模型值，因此添加/刪除了ng-hide類。 此類僅添加一個CSS規則“ display：none”，將元素隱藏。

但是，將其用於基於身份驗證的角色通常不是一個好主意。 您只是使其變得不可見，但它仍將存在於DOM中，因此可以訪問。

Answer 2

就像是

$('#userNotLoggedIn').css('display', 'none');

也許？

但是，如果您希望能夠應用並撤消它，我建議您放置display: none在自己的類中display: none可以隨意放置和移除的類。

就像是

.myHideClass {
   display: none;
}

$(`#userNotLoggedIn`).addClass('myhideClass');
$(`#userNotLoggedIn`).removeClass('myhideClass');

現在，當您執行任何邏輯時，都必須查看它們是否已登錄，而在登錄時什么也不做。 如果未登錄，則添加myHideClass ，一旦登錄，請刪除myHideClass

編輯：

但是，有一個問題是我很確定display: none; 如果您使用的是調試器，則元素仍將在DOM中可見。

Angular具有ng-if屬性，您可以放置​​標簽並綁定到布爾值。 類似於ng-if="userIsLoggedIn" ，其中userIsLoggedIn是控制器中的布爾值，設置為true或false 。

在dom中， userIsLoggedIn為true時，元素及其中的所有內容都在dom中，但是； 如果userIsLoggedIn === false則在dom中（如果您檢查），則div不可見。

您將在dom中看到的是<!--ng-if="userIsLoggedIn"--> ，一旦布爾值翻轉為true，則注釋的html行將變成您的所有實際html。