AngularJs 中的条件模板答案

【问题标题】：Conditional templates in AngularJsAngularJs 中的条件模板
【发布时间】：2014-09-30 06:22:55
【问题描述】：

我有一个登录页面，它只是页面中心的一个简单表单，没有页眉、页脚或侧边栏。我的常规页面将有一个侧边栏、页眉和页脚（这 3 个是指令）。我将所有模板都称为ng-view，具体取决于路线。我想将我的指令放在ng-view 之外，因为它们将在除登录之外的所有页面中通用，并且我不希望在每次 URL 更改时都获取它们。

如何在没有 3 个指令的情况下创建登录页面？

【问题讨论】：

ng-view 中的“调用它”是什么意思？
看样子吧！我的意思是当/login路由被命中时，登录表单应该被加载到ng-view。
啊，所以您想要获取当前在您的登录 ng-view 中的指令，并将其放在它之外。听起来不错的计划，你有什么问题？
我希望在登录页面时隐藏它们！但不知道正确的做法！
我不愿给出这个答案，因为可能有一种明智的方法可以通过内置的角度路由来做到这一点。仍然使用 angular-ui-router 这将非常容易：拥有一个顶级状态，一个用于登录页面的子状态和另一个具有侧边栏/页眉/页脚布局的子状态，这是所有其他“常规”的父级（记录-in) 状态。

标签： angularjs angularjs-directive

【解决方案1】：

我创建了a small plunk 来为您的问题提供解决方案。

这是解决方案的基础：

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

在应用控制器中：

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

我包含了几个在需要时会加载的模板。

经过重读，我创建了a new plunk 向您展示如何做到这一点。隐藏的部分很简单，随便加点CSS进去，你就看不到了您主页上的任何内容。添加了一些伪装来防止 FOUC，并写了几行来显示一个认证系统。我介绍了一个用户服务，你可以在任何需要用户的地方注入它数据。

这是你想要的更多吗？

【讨论】：

很好的例子，但它会在点击登录按钮时加载页面，而不是在身份验证后！
@Rutwick，我展示了如何实现系统以显示/隐藏与普通 ng-view 分开的（登录）对话框。操作员知道登录很热门，所以我没有重复。
:) 哦，现在我注意到了，@RutwickGangurde，你是操作者！ :) 你想让我将登录表单添加到示例中吗？
是的！那太好了:)
@RutwickGangurde，我写了一个新的 plunk 来告诉你如何解决你的问题！

【解决方案2】：

我不知道我是否得到了你真正想要做的事情，但我建议使用 ng-if

这样的 ng-if 可能看起来像这样：

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

然后在控制器中 -

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

如果您有页脚、导航栏等指令，我认为您可以在指令控制器中执行此操作并在那里隐藏指令的所有内容，因此指令将为空。

您也可以使用全局控制器来完成这项工作并将这些指令包装在 div 中，就像我的示例中一样。不过，在指令中执行它看起来更干净。

希望它是你所需要的。

【讨论】：

我已经试过了，但是当登录页面加载时指令已经编译，因此所有页面上的条件都保持为真，指令保持隐藏！
哦，对了！因此，解决方法是将指令包装在 div 中，就像我在示例中向您展示的那样。如果全局控制器捕获另一个路径然后 /login，则指令将留在模板之外。 Angular 拥有所有这些预编译、编译选项以供使用，但我不熟悉它们。对不起。
没问题！ :) 我正在尝试使用 ui.router！

【解决方案3】：

您可以使用ng-if 有条件地在 UI 上显示/隐藏它们。请注意ng-if 与ng-switch 不同。 ngIf 指令基于 {expression} 删除或重新创建 DOM 树的一部分。如果分配给 ngIf 的表达式计算结果为 false 值，则该元素将从 DOM 中删除。

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

快速步骤 -

创建一个 shell 页面并设置页眉、页脚、侧边栏和视图
将ng-if={{User.isLoggedin}} 用于页眉、页脚、侧边栏和登录
当用户未登录时将User.isLoggedin设置为false
一旦用户登录，将其设置为 true

【讨论】：

谢谢！我已经试过了！但这听起来很 jQueryish，我正在努力变得更干净一些。

【解决方案4】：

如果您使用相同的控制器，则所有视图都会共享指令，但也不建议使用不同的控制器。是什么让你对此感到不舒服？

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

祝你好运：）

【讨论】：