javascript - 无法使用通过 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”时显示。之后，用户需要在其中输入一个数字，否则会弹出一条错误消息。设置好所有内容后，用户按下提交按钮，使用所提供的信息创建某种项目。

这是按下提交时调用的函数的一部分:

$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

I put ng-model="$parent.count". However this still does not seem to work

使用 $parent 只有在模型和 Controller 之间只有一级范围层次结构时才有效。它不适用于多层层次结构。

解决方案是在 Controller 范围内使用对象的属性:

$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/>

有关详细信息，请参阅

• > What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

---

so what exactly is $parent.count accessing in this case? would this be accessing the count value in the highest point of the hierarchy?

$parent.count 访问父作用域的 count 属性。

$parent.$parent.count 访问祖父作用域。

$parent.$parent.$parent.count 访问曾祖父作用域。

新的 AngularJS 开发者通常没有意识到 ng-repeat, ng-switch, ng-view, ng-include 和 ng-if 都会创建新的子范围，因此当涉及到这些指令时，数据隐藏问题经常会出现。 ¹

虽然为一个或多个 $parent 标识符添加前缀可能有效，但这不是一个可靠的解决方案，因为对 HTML 的更改可能会添加或删除层次结构层，这反过来会破坏解决方案。更可靠的解决方案是在模型的父对象中定义对象，然后在子对象中引用该对象的属性:parentObj.someProp。

有关详细信息，请参阅

• > AngularJS Developer Guide - Scope Hierarchies
• > What are the nuances of scope prototypal / prototypical inheritance in AngularJS?