如何创建永远不会读取$ scope的$ scope函数？

在引擎盖下,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我们正在迭代的混淆.

  {{kitty.name}}: {{kitty.id}}


 $scope use on adding kitty:
None. Buggy
Full Scope.

使用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');
  };

});