angularjs - 保持模板的隐藏部分不被执行

Question

考虑以下代码：

<div ng-show="false">
  <div ng-controller="expensive"></div>
</div>
<script>
var expensive = function() {
  console.log('expensive');
};
</script>

我希望不要调用昂贵的控制器，因为它很昂贵（在现实生活中，它会触发一堆 I/O）并且没有有用的效果。它希望仅在 show 表达式（或其等效项）为真时才调用它。

顺便说一句，以下作品（并说明了我的观点），但它是可怕的丑陋：

<button ng-click="visib=!visib">display</button>
<div ng-repeat="v in (visib && [1] || [])">
  <div ng-controller="expensive"></div>
</div>
<script>
var expensive = function() {
  console.log('expensive');
};
</script>  

Answer 1

您可以使用ngSwitch在评估切换条件时将元素放置在 dom 中。

<div ng-app ng-switch on="causeIt">
    <button ng-click="causeIt = true">Make Expensive</button>    
    <div ng-switch-when="true" ng-controller="expensive"></div>
</div>

jsfiddle 上的示例

Answer 2

正确答案原来是ngIf。

ngIf 指令删除并重新创建 DOM 树的一部分