0

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

在此处输入图像描述

希望这是有道理的。每个复选框都有一个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();
  };
}
4

2 回答 2

1

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

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

于 2013-10-19T06:37:27.847 回答
1

怎么用$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();
    };
});

演示Fiddle

于 2013-10-19T07:07:02.010 回答