我想创建一个 $scope 函数，它只会操作它接收到的变量。
我制作了一个 working Plunker 进行测试。
我有一个 ng-repeat，它只列出小猫的名字和 ID。我还有一个输入表单来接收新小猫的名字。然后，我有 3 个按钮，每个按钮访问一个不同的 $scope 函数，该函数将以不同的方式操作 $scope。
每个函数的目标都是从输入表单中读取小猫的名字，读取小猫最后使用的id数组，将 id+1 分配给新的小猫，将新的小猫推送到小猫数组，并删除表单数据。 p>
第一个函数,
$scope.addFullScope(), 将不接收任何参数，并将读取和操作$scope中的所有内容。第二个函数,
$scope.addJustDelete(kitty, kitties), 将接收新的kitty和kitties数组作为参数。但是，最后，为了清理表单，它会执行$scope.kitty = undefined第三个函数,
$scope.addNoScope(kitty, kitties), 将接收新的kitty和kitties数组作为参数。但是，最后，为了清理表单，它将执行kitty = undefined。 但表单不会清理干净!一切都会出错。
我怎样才能使这第三个函数或类似的函数起作用，以便我有一个完全独立的函数来使用？
Appendix:
HTML:
<body ng-app='app' ng-controller="ctrl">
<h3 ng-repeat="kitty in kitties">
{{kitty.name}}: {{kitty.id}} //Kitties list
</h3>
<input placeholder='Kitty name to add' class='form form-control'
type="text" ng-model="kitty.name" />
<h3> $scope use on adding kitty:</h3>
<button ng-click="addFullScope()">Full Scope.</button>
<button ng-click="addJustDelete(kitty, kitties)">Just delete.</button>
<button ng-click="addNoScope(kitty, kitties)">None. Buggy</button>
</body>
Controller :
.controller('ctrl', function($scope) {
$scope.kitties = [
//Let's imagine kitties in here.
{name: 'Purple kitty', id:35},
//Kittie 36 died in a car accident. :(
{name: 'Rodmentou cat', id: 37},
{name: 'Fatty kitty', id: 38}
];
$scope.addFullScope = function () {
var size = $scope.kitties.length;
var id = $scope.kitties[size-1].id + 1;
$scope.kitty.id = id;
$scope.kitties.push($scope.kitty);
$scope.kitty = undefined;
};
$scope.addJustDelete = function (kitty, kitties) {
var size = kitties.length;
var id = kitties[size-1].id + 1;
kitty.id = id;
kitties.push(kitty);
$scope.kitty= undefined;
};
$scope.addNoScope = function (kitty, kitties) {
var size = kitties.length;
var id = kitties[size-1].id + 1;
kitty.id = id;
kitties.push(kitty);
kitty = undefined; //Don't work
};
});
最佳答案
在幕后，Angular 需要一种方法来监视 ngModel 是否发生更改，并使用 $scope.$watch 来完成此操作。 $watch 被认为是一个平等观察者，它检查一个特定的属性是否发生了变化，而不是它下面的对象是否发生了变化，这将是一个引用观察者。
我在 Tero Parviainen's blog 上找到了很好的描述和图片
所以你的代码的问题是你正在设置 kitty = undefined，但是 ngModel 和扩展 $scope.$watch 正在寻找 kitty.name 的变化>。为了证明是这种情况，我在 kitty.name 上添加了一个 watch ，当您设置 kitty = undefined 时， watch 永远不会被触发。将 kitty 设置为 undefined 会更改底层对象，但不会更改它的属性(非常困惑)!我创建了一个 plunker example with updated code .
HTML
为了清楚起见，我制作了我们正在更新的模型 kitten，这样它就不会与我们正在迭代的 kitties 混淆。
<h3 ng-repeat="kitty in kitties">
{{kitty.name}}: {{kitty.id}}
</h3>
<input placeholder='Kitty name to add' class='form form-control' type="text" ng-model="kitten.name" />
<h3> $scope use on adding kitty:</h3>
<button class='btn btn-success' ng-click="addNoScope(kitten, kitties)">None. Buggy</button>
<button class='btn btn-danger' ng-click="noWatch(kitten)">Full Scope.</button>
Javascript
最大的更新是从模型的小猫中创建一只克隆小猫，这样它就不会在数组中被引用。此外，当我们想要重置模型的小猫时，我们直接设置 kitten.name 和 kitten.id 属性。
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.kitten = {
name: undefined, id: undefined
};
$scope.$watch('kitten.name', function() { console.log("changed"); }, true);
$scope.kitties = [
//Let's imagine kitties in here.
{name: 'Purple kitty', id:35},
//Kittie 36 died in a car accident. :(
{name: 'Rodmentou cat', id: 37},
{name: 'Fatty kitty', id: 38}
];
$scope.addNoScope = function (kitten, kitties) {
if (!$scope.kitten || !$scope.kitten.name) return;
var size = kitties.length;
var id = kitties[size-1].id + 1;
var newKitten = {
name: kitten.name, id: id
}
kitties.push(newKitten);
kitten.name = undefined;
kitten.id = undefined;
// kitten = undefined;
};
$scope.noWatch = function (kitten) {
kitten = undefined;
console.log('not watching');
};
});
关于javascript - 如何创建从不读取 $scope 的 $scope 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34070183/