Angular 1.5组件跟踪对象变化

Question

我有一个 angular 1.5（带组件）应用程序。在其中一个组件中，我将本地对象定义为：

model.user = {
  firstName: 'John',
  lastName: 'Smith'
}

然后在标记中我将其用作：

<input class="field" ng-model="model.user.firstName" />

我想做的是跟踪用户何时对此字段进行更改并记录事件。我花了一些时间查看不同的选项，但我想问一下在使用组件时建议的方法是什么。以下是我目前的发现：

$watch(...) - 这很好用，因为我得到了旧值和新值，但似乎不鼓励使用这种方法。
$onChanges - 这不起作用，因为这是一个本地对象。
$doCheck - 这可能会起作用，但我没有获得有关已更改对象的任何信息。我必须手动跟踪以前的值。
ng-change - 这可行，但我有很多字段，维护标记可能会变得有点困难。

我正在寻找像 Telerik 的 kendo MVVM 这样的方法。在那里我可以将任何对象的更改事件绑定到一个函数并检索已更改的字段、旧值和新值。这种方法的美妙之处在于，如果我的对象发生变化，我不必对我的代码进行任何更改，更改事件将选取新字段，而无需我编写任何代码。更清洁，更易于维护。

这在 angular 1.5 组件中可能吗？如果是这样，推荐的方法是什么？

谢谢。

Answer 1

正如@CShark 所建议的，ng-change 方法是最佳选择。为了减少标记中的冗长，我创建了一个自定义属性指令，用于注入 ng-model-options 和 ng-change 属性：

module.directive('inputChanged', function ($compile) {
        function link(scope, element, attrs) {
            var field = attrs.ngModel;
            if (field) {
                element.removeAttr('input-changed');
                element.attr('ng-model-options', "{ updateOn: 'blur' }");
                var fn = "model.changed('" + field + "', " + field + ", '{{ " + field + " }}')";
                element.attr('ng-change', fn);

                $compile(element)(scope);
            }    
        }

        return {
            restrict: 'A',
            link: link,
            terminal: true,
            priority: 1000
        }
    });

在我的模型中我有：

model.changed = function (field, newValue, oldValue) {
  //log the change
}

完成后，只需将 input-changed 属性添加到任何具有 ng-model 属性的元素。例如

<input ng-model="model.user.firstName.value" input-changed />

请注意，我仅在用户通过设置 ng-model-options 提交更改后才捕获更改。另请注意，我将旧值和新值都传递给 model.changed 函数。这样我就可以在不实际使用 $watch 的情况下实现类似 $watch 的功能。

我不确定这是否是最好的解决方案，但在我的场景中它可以。

Angular 1.5组件跟踪对象变化

Angular 1.5 component track object changes

angularjs

angular-components