javascript - Angular 1.3 中是否有更好的模式可以在每次修改 ng-repeat 中的项目时调用函数？

Question

现在我们正在使用这种模式来动态更新我们的 Angular 应用程序中的模型。它工作得很好，但我不喜欢一直重复 ng-change 。不是世界末日，但我想看看是否有我不知道的更好的模式。

我查看了 $watch 和 $watchCollection，但我不知道它们在观看大量对象时对性能的影响，而且看起来 watch 也会在任何手动 $watch/$watchCollection 之间复制以及 ng-repeat 创建的 watch 。 $watch 的东西似乎也处于较低级别，因为它返回更改的属性或数组，而不仅仅是处理模型。

我们是否只是缺少一个更好的模式，或者这是目前处理这种情况的最简单方法？

<div ng-repeat="item in items">
   <input type="text" ng-model="item.fooBar" ng-change="saveItem(item)>
   <input type="tel" ng-model="item.someOtherField" ng-change="saveItem(item)>
</div>

function Controller($scope){
   $scope.items = [{fooBar: "test", someOtherField:123}]
   $scope.saveItem = function(item){
      doStuffToSaveItem(item);
   }
}

Answer 1

我很确定您当前的解决方案是最简单、最优雅的解决方案，如果您没有任何性能问题，我真的不会担心它。

但是，一种最有可能更快的方法是跳过将 ng-change 添加到每个输入字段，并在父元素上使用自定义指令，监听其任何子元素的更改事件。我创建了一个example what it could look like .

注意:更改事件不会在您键入时触发，只有当输入失去焦点时才会触发。

基本上，我们有一个名为 on-child-change 的指令，它将表达式作为值。该指令将监听子级上的更改事件，当检测到更改事件时，它将运行表达式。该表达式可以引用 childScope，这将是输入字段自己的范围(它又包含该输入的项目对象)。

HTML:

<div ng-controller="MyCtrl" on-child-change="onChildChange(childScope)">
    <div ng-repeat="item in items" class="Item">
        <input type="text" ng-model="item.fooBar" />
        <input type="tel" ng-model="item.someOtherField" />
    </div>
</div>

JS:

.directive('onChildChange', function ($parse) {
        return function (scope, element, attrs) {
            var changeExpression = $parse(attrs.onChildChange);
            element.change(function (event) {
                changeExpression(scope, {
                    childScope: angular.element(event.target).scope()
                });
            });
        }
    });

它可能还可以进一步改进，但我希望总体想法能够被理解。再说一次，我会测量并且只在确实需要时才进行这样的优化。