AngularJS通过范围？

Question

我实际上不确定问题的标题应该是什么，因为我不清楚我缺少什么。

我将其简化为一个非常简单的示例（实际情况更为复杂）。 我在ng-switch内有一个文本框和按钮。 我读过的开关创建了它自己的本地作用域。

单击按钮时，我想做的就是将文本框的值传递给函数。 在函数中，我将使用值执行所需的操作，然后清除文本框。 我正在努力寻找正确的方法来做到这一点。

控制器代码：

$scope.temp = 1;

$scope.tempCall = function (tempModel) {
    tempModel = ""; //this doesn't work
    $scope.tempModel = ""; //nor does this
};

HTML /模板：

<div ng-switch on="temp">
    <div ng-switch-when="1">
        <input ng-model="tempModel" />
        <input type="button" ng-click="tempCall(tempModel)" />
    </div>
    <div ng-switch-when="2">TWO</div>
</div>

我相信我实际上可以从父范围或根范围中遍历该范围并清除该值，但这并不“正确”。 清除此值的正确（角度）方法是什么？

Answer 1

在角度范围中使用原始值时，不能从子范围覆盖父范围中的值。 这是因为angular使用javascript原型继承。

在这种情况下，您可以做的是在父范围内创建一个对象，然后可以在子范围内更新该对象上的值。 因为您不覆盖对象（仅附加到对象的属性），所以引用起作用。

我创建了一个关于这个的演示，您可以在这里查看

$scope.temp = 1;
$scope.tempModel = {};

$scope.tempCall = function () {
  $scope.tempModel.previous = $scope.tempModel.value
  $scope.tempModel.value = "";
};

<div ng-switch on="temp">
  <div ng-switch-when="1">
      <input ng-model="tempModel.value" />
      <input type="button" ng-click="tempCall()" />
      {{tempModel.previous}}
  </div>
  <div ng-switch-when="2">TWO</div>

Answer 2

这是一种实现方法：

<input type="button" ng-click="tempCall(tempModel);tempModel='';" />

---

可能更多的“角度方式”是在模型中使用点，例如：

<input type="text" ng-model="tempModel.value" />

然后通过传递tempModel对象来调用函数，如下所示：

<input type="button" ng-click="tempCall(tempModel)" />

然后，您将可以通过以下方式清除该值：

$scope.tempCall = function (tempModel) {
    tempModel.value = "";
};

这是一个小提琴

为防止数据绑定问题，“经验法则是，如果使用ng-model，则必须在某处加点。” MiškoHevery