Javascript 防止对角度中的父作用域进行摘要

我正在研究Angular作为一个潜在的框架用于即将到来的项目。我正在制作的测试应用程序包含一个无序列表，其中的列表项可以通过添加链接添加到其中。每个列表项都包含许多复选框。通过每个列表项旁边的加号和减号链接，可以增加或减少特定列表项的复选框数量。注意：

希望这是有道理的。每个复选框都有一个

ng model

指令，将复选框的值绑定到对象中的属性。当应用程序处于上述状态时，单击任何复选框将触发六个检查（每个复选框一个）--根控制器的整个

$scope

将被检查是否有更改。理想情况下，仅检查相关列表项的

$scope

是否有更改。我怎样才能做到这一点？我附上了我的测试代码供参考。我已尝试将

ng click=“$event.stopPropagation（）”

添加到

input

节点以及

li

节点，但这似乎会增加摘要中的检查数（两倍）

HTML:

---

如果您担心AnguarJS脏检查对于您的需求来说太慢，那么您的问题应该是“AngularJS构建X是否会太慢？”如果X是一款具有大量恒定渲染的3D游戏，那么答案可能是肯定的，AngularJS不是您想要的。如果X是“一个可扩展的面向业务/消费者的单页应用程序”，那么脏检查算法将不会成为您的瓶颈

---

这很好地解释了数据绑定的工作原理，并谈到了一些性能问题。

如何使用

$watch

。我们只能对特定行调用watch。这意味着，如果您在任何复选框状态更改上有4x4矩阵（4行4列），我们会调用watch 4次

var webApp = angular.module('myModule', []);

webApp.controller('App', function ($scope) {
    $scope.lines = [];

    $scope.addLine = function () {

        console.log("addLine");

        $scope.lines.push({
            boxes: []
        });

    };
});

webApp.controller('LineController', function ($scope) {
    $scope.addBox = function () {
        var box = {};
       /* Object.defineProperty(box, 'on', {
            enmerable: true,
            get: function () {
                console.log('Get!');
                return this._on;
            },
            set: function (on) {
                this._on = on;
            }
        });*/
        $scope.line.boxes.push(box);



        $scope.$watch(function () {
            return $scope.line.boxes;
        },
        function (newValue, oldValue) {

            if(newValue == oldValue) return;
             console.log('Get new checkbox!');

        }, true);

    };

    $scope.removeBox = function () {
        $scope.line.boxes.pop();
    };
}); 

---

Demo

当应用程序处于上述状态时，单击任何复选框都会触发六个检查（每个复选框一个）——根控制器的整个$scope都会检查是否有更改。理想情况下，只检查相关列表项的$scope是否有更改

，您能再解释一下您想要实现什么吗？

function App($scope) {
  $scope.lines = [];
  $scope.addLine = function () {
    $scope.lines.push({
      boxes: []
    });
  };
}

function LineController($scope) {
  $scope.addBox = function () {
    var box = {};
    Object.defineProperty(box, 'on', {
      enmerable: true,
      get: function () {
        console.log('Get!');
        return this._on;
      },
      set: function (on) {
        this._on = on;
      }
    });
    $scope.line.boxes.push(box);
  };

  $scope.removeBox = function () {
    $scope.line.boxes.pop();
  };
}

var webApp = angular.module('myModule', []);

webApp.controller('App', function ($scope) {
    $scope.lines = [];

    $scope.addLine = function () {

        console.log("addLine");

        $scope.lines.push({
            boxes: []
        });

    };
});

webApp.controller('LineController', function ($scope) {
    $scope.addBox = function () {
        var box = {};
       /* Object.defineProperty(box, 'on', {
            enmerable: true,
            get: function () {
                console.log('Get!');
                return this._on;
            },
            set: function (on) {
                this._on = on;
            }
        });*/
        $scope.line.boxes.push(box);



        $scope.$watch(function () {
            return $scope.line.boxes;
        },
        function (newValue, oldValue) {

            if(newValue == oldValue) return;
             console.log('Get new checkbox!');

        }, true);

    };

    $scope.removeBox = function () {
        $scope.line.boxes.pop();
    };
});