Блог

Я разрабатываю веб-приложение с использованием AngularJS. У меня проблема с объектом $ 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 свойство, используя watches … вот так:

 $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}} , например!

Как решается эта проблема? и почему это происходит?

Это происходит потому, что 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>