AngularJS: 为什么 $scope 不检测所有对象？

Question

我正在使用 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}} 等直接在模板中看到它！

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

Answer 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>

AngularJS: 为什么 $scope 不检测所有对象？

AngularJS: Why doesn't $scope detect all objects?

javascript

html

angularjs

controller

angularjs-scope