Question

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

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

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

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

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

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

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

这可能是角度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
}

完成此操作后，只需将输入更改的属性添加到具有ng-model属性的任何元素。 E.g。

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

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

我不确定这是否是最佳解决方案，但它会在我的方案中完成。

Angular 1.5组件跟踪对象更改

1 个答案: