AngularJS传递作用域

AngularJS Passing Scope?

本文关键字：作用域 AngularJS      更新时间：2023-09-26

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

我把它归结为一个非常简单的例子(实际情况更复杂)。我有一个文本框和按钮内的ng开关。这个开关，我读过，创建它自己的本地作用域。

我想做的是当按钮被单击时，将文本框的值传递给函数。在函数中，我将对值做需要做的事情，然后清除文本框。我正在努力寻找正确的方法来做这件事。

控制器代码:

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

我相信我实际上可以从父作用域或根作用域遍历作用域并清除值，但这"感觉"不正确。清除这个值的正确(Angular)方法是什么?

当你在角作用域中使用原始值时，你不能从子作用域中覆盖父作用域中的值。这是因为angular使用了javascript原型继承。

在这种情况下你能做的是在父作用域中创建一个对象，然后你可以在子作用域中更新它的值。因为您没有覆盖对象(只有附加到它的属性)，所以引用可以工作。

我在plunk上做了一个演示你可以在这里查看

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

有一种方法:

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

可能更"Angular的方式"是在你的模型中使用点:

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

然后通过传递tempModel对象调用函数，如:

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

然后你可以用:

清除这个值
$scope.tempCall = function (tempModel) {
    tempModel.value = "";
};

Here is a fiddle

为了防止数据绑定问题，"经验法则是，如果使用ng-model，必须在某个地方有一个点。"Miško

与尊敬听取
相关文章：