Невозможно установить родительскую переменную, используя дочернюю область, созданную с помощью ng-if

Question

У меня есть следующий div

<div class="form-group col-lg-12 ignore-left-padding" ng-show="!labeledIntents">
  <label for="intent-count"><h4>Number of intents</h4></label>
     <div>
        <switcher ng-model="manualNumberOfIntents"
                  ng-change="onSwitcherChange()" 
                  false-label="Autodetect" true-label="Manual input">
        </switcher>&nbsp;
        <input ng-if="manualNumberOfIntents" show-focus="autoNumberOfIntents"
               ng-model="$parent.count" type="number" step="1" min="1" 
               max="200" id="intent-count" placeholder="1-200"
               style="width: 75px;" required/>
    </div>
</div>

Там у меня есть переключатель, который при включении отображает поле с номером, которое является обязательным. Для этого текстового поля я установил его так, чтобы оно отображалось при включении «manualNumberOfIntents». После этого пользователю необходимо ввести число или всплывающее сообщение об ошибке. как только все установлено, пользователь нажимает кнопку отправки, которая создает какой-то проект, используя предоставленную информацию.

Вот часть функции, которая вызывается при нажатии submit:

$scope.submit = function (event) {
    event.preventDefault();
    if (!$scope.file) {
      return;
    }
    $scope.projectNameDuplication = false;
    $scope.requestInProgress = true;
    var projectname = $scope.projectname.trim();
    var userparticipant = $scope.customChatParticipants ? $scope.userparticipant : "USER";
    var agentparticipant = $scope.customChatParticipants ? $scope.agentparticipant : "AGENT";
    var count = $scope.manualNumberOfIntents ? $scope.count : false;
    console.log($scope.count);

Затем она использует переменные и обрабатывает их.

Вот функция, которая получаетвызывается, когда коммутатор активирован:

$scope.onSwitcherChange = function () {
    $scope.count = '';
  }

В приведенном выше коде console.log ничего не возвращает, независимо от того, что я пытался установить для count. Это заставляет меня поверить, что счетчик просто устанавливается на '$ через $ scope.onSwitchChange, но никогда больше не затрагивается. Я провел некоторое исследование и обнаружил, что ng-if создает свою собственную область, и поэтому, если я использую ng-model = "count", он не будет работать, поскольку он пытается сосчитать количество ссылок в области, к которой родитель не может получить доступ. Таким образом я поставил ng-model = "$ parent.count". Однако это все еще не работает ... у кого-нибудь есть идеи?

Когда я изменяю $ scope.count, он делает это в родительской области видимости, поэтому он не должен влиять на то, как я ссылаюсь на него вHTML верно? Любые предложения будут ценны! Я довольно новичок в angularjs, поэтому заранее прошу прощения, если это очевидный вопрос.

Answer 1

ставлю ng-model="$parent.count". Однако это все еще не работает

Использование $parent будет работать только в том случае, если существует только одна иерархия области действия уровня между моделью и контроллером. Он не будет работать для нескольких уровней иерархии.

Решение состоит в том, чтобы использовать свойство объекта в области видимости контроллера:

$scope.form1 = { count: 0 };

$scope.submit = function (event) { 
     console.log($scope.form1.count);
};

<input ng-if="manualNumberOfIntents" show-focus="autoNumberOfIntents"
       ng-model="form1.count" type="number" step="1" min="1" 
       max="200" id="intent-count" placeholder="1-200"
       style="width: 75px;" required/>

Для получения дополнительной информации см.

• Каковы нюансы прототипного / прототипического наследования области в AngularJS?

---

, так что же такое $parent.count доступ вэтот случай? будет ли это обращаться к значению счетчика в самой высокой точке иерархии?

$parent.count обращается к свойству count родительской области.

$parent.$parent.count обращается к дедуscope.

$parent.$parent.$parent.count обращается к области видимости прадеда.

Новые разработчики AngularJS часто не осознают, что ng-repeat, ng-switch, ng-view, ng-include и ng-if все создают новые дочерние области, поэтому проблема скрытия данных часто обнаруживается, когда задействованы эти директивы. ¹

При добавлении одного или нескольких идентификаторов $parent префикс можетработать, это не надежное решение, так как изменения в HTML могут добавить или удалить иерархические слои, которые, в свою очередь, сломают решение. Более надежным решением является определение объектов в родительском объекте для вашей модели, а затем ссылка на свойство этого объекта в дочернем объекте: parentObj.someProp.

Для получения дополнительной информации см.

• AngularJS Developer Guide - Иерархии областей действия
• Каковы нюансы прототипа / прототипического наследования области в AngularJS?