AngularJS：为什么 $scope 不检测所有对象？答案

【问题标题】：AngularJS: Why doesn't $scope detect all objects?AngularJS：为什么 $scope 不检测所有对象？
【发布时间】：2021-02-22 05:49:16
【问题描述】：

我正在使用 AngularJS 开发一个 Web 应用程序。我对 $scope 对象有疑问。我的应用程序由许多 HTML 页面组成，其中我使用了许多不同的 <form>（与 ng-if 级联启用），如下所示：

<form name="formOne" class="form-alignment">
   <div>Elements of form...</div>
   <div>Elements of form...</div>
</form>

<div ng-if="someMethod()>
   <form name="formTwo" class="form-alignment">
      <div>Elements of form...</div>
      <div>Elements of form...</div>
   </form>
</div>

<div ng-if="someOtherMethod()>
   <form name="formThree" class="form-alignment">
      <div>Elements of form...</div>
      <div>Elements of form...</div>
   </form>
</div>

在控制器中，我使用$scope 对象通过$valid 属性立即了解这些表单何时有效或无效，使用手表......就像这样：

$scope.$watch(angular.bind(this, function () {
            return $scope.formOne.$valid;
        }), function (newValue, oldValue) {
            if($scope.formOne.$valid == true) {
                console.log("First form valid")
            } else {
                console.log("First form invalid")
            }
        });

不幸的是，我不明白为什么$scope 对象只检测到第一个表单，而没有检测到所有其他表单（即使它们显示在网页上！）。例如，如果我在控制台中打印 $scope 对象，结果是：

如您所见，在对象中仅检测到 formOne（以及它的 formOne.$valid、formOne.$invalid 等）属性，但没有检测到 formTwo 和 formThree！例如，如果您想在像以前一样制作的手表中使用属性formOne.$valid，我会收到以下错误：

虽然这个属性存在，也可以直接在模板中看到，比如{{formTwo.$valid}}！

这个问题是如何解决的？为什么会这样？

【问题讨论】：

标签： javascript html angularjs controller angularjs-scope

【解决方案1】：

这是因为 ng-if 创建了一个子作用域。为了解决这个问题，您可以改用 ng-show 或将表单放入对象中。

// controller
$scope.forms = {};

// view
<form name="forms.formOne" class="form-alignment">
    <div>Elements of form...</div>
   <div>Elements of form...</div>
</form>

<div ng-if="someMethod()>
   <form name="forms.formTwo" class="form-alignment">
      <div>Elements of form...</div>
      <div>Elements of form...</div>
   </form>
</div>

<div ng-if="someOtherMethod()>
   <form name="forms.formThree" class="form-alignment">
      <div>Elements of form...</div>
      <div>Elements of form...</div>
   </form>
</div>

【讨论】：