Question

我正在调查Angular作为即将推出的项目的潜在框架。我正在制作的测试应用程序包含一个无序列表，可以通过添加链接添加列表项。每个列表项都包含许多复选框。可以使用每个列表项旁边的加号和减号链接增加或减少特定列表项的复选框数。观察：

enter image description here

希望这是有道理的。每个复选框都有一个ng-model指令，将复选框的值绑定到对象中的属性。当应用程序处于上述状态时，单击任何复选框将触发六次检查（每个复选框一次） - 检查根控制器的整个$scope是否有更改。理想情况下，只检查相关列表项的$scope是否有变化。我怎么能做到这一点？我附上了我的测试代码供参考。我已尝试将ng-click="$event.stopPropagation()"添加到input节点以及li节点，但这似乎会增加（加倍）摘要中的检查次数。

HTML：

<div ng-app ng-controller="App">
  <ul>
    <li ng-repeat="line in lines" ng-controller="LineController">
      <input type="checkbox" ng-repeat="box in line.boxes" ng-model="box.on" />
      <a ng-show="line.boxes.length > 1" ng-click="removeBox()">-</a>
      <a ng-click="addBox()">+</a>
    </li>
  </ul>
  <a ng-click="addLine()">Add</a>
</div>

JavaScript的：

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();
  };
}

Answer 1

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

这个SO answer很好地解释了数据绑定的工作原理，并对性能问题进行了一些讨论。

Answer 2

如何使用$watch。我们只能为特定行调用watch。这意味着如果您在任何复选框状态更改时有4x4矩阵（4行，4列），我们会调用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();
    };
});

演示 Fiddle

防止Angular中父作用域的摘要

2 个答案: