AngularJs中的條件模板

我有一個登錄頁面，它只是頁面中心的簡單表單，沒有頁眉，頁腳或側邊欄。我的常規頁面將有一個側邊欄，頁眉和頁腳（這3個是指令）。我打電話給我的所有模板ng-view，這取決於路線。我想將我的指令放置在ng-view之外，因爲它們在所有頁面中都很常見，除了登錄以外，我不希望它們在每次URL更改時都被獲取。AngularJs中的條件模板

我如何擁有一個沒有3個指令的登錄頁面？

來源

2014-09-30 Rutwick Gangurde

什麼叫「稱之爲」指的是在NG-看法？ – pixelbits 2014-09-30 06:27:40

在視圖中！我的意思是當'/ login'路徑被命中時，登錄表單應該在'ng-view'中加載。 – 2014-09-30 06:28:59

啊，所以你想要採取當前在你的登錄ng-view中的指令，並把它放在它之外。聽起來很不錯，你有什麼問題？ – pixelbits 2014-09-30 06:33:04

我創建a small plunk爲您提供解決問題的方法。

這是解決方案的基礎：

<ng-include src="appVm.templatetoShow"> 
</ng-include>

在AppController中

：

function AppController() { 
    this.templatetoShow = 'login.html'; 
    }

我包括一對夫婦在需要時被加載的模板。

經過一番重讀，我讓a new plunk告訴你如何做到這一點。隱藏部分很簡單，只需在混合中添加一些CSS，並且您不會在主頁上看到任何內容。增加了一些隱形防止FOUC，並寫了幾行顯示認證系統。我推出了一項用戶服務，您可以在需要用戶的任何地方注入數據。

這是你想要的更多嗎？

來源

2014-09-30 07:12:00

很好的例子，但它加載頁面點擊登錄按鈕，而不是身份驗證後！ – 2014-09-30 09:48:39

@Rutwick，我展示瞭如何實現顯示/隱藏與正常的ng視圖分離的（登錄）對話框的系統。操作員知道要登錄，所以我沒有重複。 – 2014-09-30 11:29:26

非常感謝:) – 2014-09-30 11:44:48

我不知道如果我得到你真正想做的事，但我會建議使用NG-如果

這樣的NG-如果可能看起來是這樣的：

<div ng-if="notLogin"> here is Your navbar contents. Directies, anything You need </div>

，然後在控制器 -

$scope.notLogin = $location.path() !== "/login"

如果您有頁腳，導航欄等指令，我覺得你可以做，在指令控制器和隱藏指令的所有內容在那裏，所以指令將是空的。

您也可以使用全局控制器來完成這項工作，並將這些指令封裝在div中，就像我的示例中一樣。然而，在指令中做它看起來更清潔。

希望它能滿足你的需求。

來源

2014-09-30 06:46:25 Jarema

我已經試過了，但是當登錄頁面加載時已經編譯了該指令，因此條件在所有頁面上都保持爲真，並且指令保持隱藏狀態！ – 2014-09-30 06:51:50

哦對！所以解決方法是將指令包裝在div中，就像我在例子中給你展示的那樣。然後，如果全局控制器捕獲另一個路徑，然後登錄，則指令將不在模板中。 Angualar擁有所有這些預編譯，編譯選項以供使用，但我不熟悉它們。抱歉。 – Jarema 2014-09-30 07:14:54

沒問題！ :)我正在用ui.router嘗試一些東西！ – 2014-09-30 09:37:00

您可以使用ng-if在UI上有條件地顯示/隱藏它們。請注意，ng-if與ng-switch不同。 ngIf指令根據{expression}刪除或重新創建一部分DOM樹。如果賦值給ngIf的表達式求值爲假值，那麼該元素將從DOM中移除。

More details - https://docs.angularjs.org/api/ng/directive/ngIf

入住步驟 -

創建一個shell頁面，並設置頁眉，頁腳，側邊欄和頁眉，頁腳，側邊欄視圖
使用ng-if={{User.isLoggedin}}和登錄
設置User.isLoggedin到用戶未登錄時爲假
用戶登入時將其設爲真

來源

2014-09-30 06:46:43 Rabi

謝謝！我已經試過了！但它聽起來非常jQueryish，我正在努力變得更清潔。 – 2014-09-30 09:37:50

如果您使用相同的控制器，則在所有視圖之間共享指令，但是不建議使用不同的控制器。什麼讓你感到不舒服？

看看這篇文章： https://stackoverflow.com/a/16213055/1218551

最良好的祝願:)

來源

2014-09-30 07:20:36 katmanco

AngularJs中的條件模板

回答

相關問題