如何创建永远不会读取$ scope的$ scope函数？
Rod*_*tou 4 html javascript arrays angularjs angularjs-scope
我想创建一个$ scope函数,它只会操作它接收的变量.
我做了一个工作的Plunker来测试一下.
我有一个ng-repeat,它只列出了小猫的名字和id.我还有一个输入表单来接收新猫咪的名字.然后,我有3个按钮,每个按钮访问一个不同的$ scope函数,它将以不同的方式操作$ scope.
每个函数的目标是从输入表单中读取 kitty 的名称,读取 kitties数组中使用的最后一个id,将id + 1分配给新kitty,将新kitty推送到kitty数组并删除表格数据.
第一个函数,
$scope.addFullScope()将不会作为参数接收任何内容,并将从中读取和操作所有内容$scope.第二功能,
$scope.addJustDelete(kitty, kitties)将接收新的kitty和kitties阵列作为参数.但是,最后,为了清理表格,它会做$scope.kitty = undefined第三个功能,
$scope.addNoScope(kitty, kitties)将接收新的kitty和kitties阵列作为参数.但是,最后,为了清理表格,它会做kitty = undefined.但表格不会清理!一切都会出现问题.
我怎样才能使这个第三个功能或类似功能工作,所以我有一个完全独立的功能可以使用？
附录:
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('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被认为是一个Equality Watcher,它检查一个特定的属性是否已经改变,而不是它下面的对象是否已经改变,这将是一个参考观察者.
我在Tero Parviainen的博客上找到了一个很好的描述和形象
因此,您的代码的问题在于您正在设置kitty = undefined,但是ngModel和扩展名$ scope.$ watch正在寻找更改kitty.name.为了证明这种情况,我添加了一个手表kitty.name,当你设置kitty = undefined手表永远不会被触发.将kitty设置为undefined会更改底层对象,但不会更改它的属性(非常令人困惑)!我用更新的代码创建了一个plunker示例.
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');
};
});
| 归档时间： |
|
| 查看次数： |
219 次 |
| 最近记录： |