Javascript 使用AngularJS创建渲染条件

我知道如何在AngularJS中创建一个视图条件，根据条件显示或隐藏dom元素：

<div ng-show="{{isTrue}}">Some content</div>

一些内容

---

但是如何创建一个渲染条件来确定是否渲染div？

至少有两种方法：

• 使用模板化呈现部分内容
• 使用带条件渲染功能的简单表达式（请参见下面的说明）

对于简单的组件，我建议坚持使用渲染功能。很容易理解

$scope.render = function(condition) {        
   return condition ? "This is rendered when condition == TRUE" : "This is rendered when condition == FALSE";
};

只需将其包含在HTML中，如下所示：

{{render(true)}}

---

您还可以使用angular指令将其封装起来，这将为您提供非常好的标记和无限的可能性

angularjs 1.1.5及以上版本用户的更新（1.0.7不支持）：

相关提交：

Angular现在有一个条件渲染指令：

ngIf

用法：

<div ng-if="conditional_expression"></div>

---

实际上，这个指令是为处理超过1个案例而创建的，但是您也可以这样使用它。有关更复杂用法的示例，请参见答案。

推荐的方法是使用ng include

例如：

（空白）
模板的url:{{template.url}

template1.html的内容
template2.html的内容

查看

if

指令。我相信这会很好地为您服务。

这是一个很好的方法。但我真的很期待一些优雅的东西，比如ng render=“{{condition}}”，让它变得非常简单和容易请仔细阅读我的答案-你可以用指令来结束它，它会给你你你需要的东西-一个干净的标记，像这样：

…

我不认为Angular提供了这种开箱即用的方法。创建渲染指令并不是那么简单。OP表示他想更改dom结构，指令需要监视条件属性并销毁作用域并释放相关源，否则可能会泄漏到内存中。这是不正确的，需要编译返回值。这甚至与“不在控制器中进行DOM操作”的最佳实践背道而驰。最好的方法是使用ng-include。建议在哪里使用？在我看来，这似乎是对小html片段的过度使用。顺便说一句，你的小提琴坏了。看起来这已经从Angular UI中删除了。不知道为什么。@bmoeskau可能是因为从v1.1.5开始，它ngif现在是AngularJS的一部分，因为AngularJS核心正在追赶。如果“ng-If”为false，DOM在加载中呈现，但可能没有呈现？

<div ng-switch="showMe">
    <div ng-switch-when="true">Hello!</div>
</div>

<div ng-app="">
  <div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url"></div>
  </div>


  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
  </script>

  <!-- template2.html -->
  <script type="text/ng-template" id="template2.html">
    Content of template2.html
  </script>
</div>