AngularJS 指令之 ng-if

最新推荐文章于 2023-12-20 22:34:48 发布

转载最新推荐文章于 2023-12-20 22:34:48 发布 · 230 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/itman70s/p/ngif.html

本文深入探讨了ng-if属性在Angular框架中的使用方式，包括其用法、工作原理以及常见问题。重点阐述了ng-if相较于ng-show/ng-hide的复杂性，涉及元素的克隆、事件处理及scope管理。并通过实例展示了如何避免常见的错误陷阱，如元素不随值变化而添加或删除的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用途

ng-if 属性用来控制页面内元素的添加或移除。

用法

<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked">This is removed when the checkbox is unchecked.</span>

工作原理

本以为ng-if和ng-show/ng-hide类似（4行代码），单纯的进行元素的添加删除，然而ng-if要复杂得多，40多行代码。子元素的ng事件，scope处理等。

ng-if 条件为true时，将所在元素的克隆添加到其父元素内，然后处理该元素以及内部所有子元素的ng事件；为false时，将其从父元素中移除，并且将其scope删除。

ngif的核心代码：

var block, childScope, previousElements;
$scope.$watch($attr.ngIf, function ngIfWatchAction(value) {

  if (value) {
    if (!childScope) {
      $transclude(function(clone, newScope) {
        childScope = newScope;

        $animate.enter(clone, $element.parent(), $element);
      });
    }
  } else {
    if (previousElements) {
      previousElements.remove();
      previousElements = null;
    }
      $animate.leave(previousElements).then(function() {
        previousElements = null;
      });
  }
});

常见问题

# 元素不随着指定的值进行添加或删除

<div ng-if="{{myValue}}" class="ng-hide"></div>

上述代码中ng-if 绑定的是{{}}表达式的值对应的字符串，而不是myValue。布尔型对应的是"" 空串或者 "true" 。所以，myValue值变化后，对于ng-if而言，监视的是固定的字符串，没有变化。也就不会触发页面元素的添加或删除事件。

转载于:https://www.cnblogs.com/itman70s/p/ngif.html