Question

我正在使用AngularJS构建报表查看器，并试图找出通过多个指令处理报表定义更改的正确方法。

例如，我的报告定义类似于：

vm.report = {
    dateRange: {
        startDate: "2013",
        endDate: "2014"
    },
    columns: [
        "id",
        "first_name",
        "last_name"
    ]
}

我已经创建了各种指令来处理修改报告字段。例如，我有指令允许通过日历选择器修改dateRange。我有一个列选择器指令，允许修改列。最后，我有一个指令，允许用户加载新报告，或保存当前报告。

目前，我正在使用编辑器的回调来处理更改。例如，编辑器将声明如下：

<date-range-editor ng-model="vm.report.dateRange" on-date-range-changed="vm.handleDateRangeChanged()" />
<column-editor ng-model="vm.report.columns" on-columns-changed="vm.handleColumnsChanged()" />

这当然有效，但我不确定它是否理想。是否可以更好地观看vm.report进行任何更改？或许我的指令应该发出我的控制器可以处理的事件。这些方法的优点和缺点是什么？还有其他我应该看的吗？

Answer 1

当您阅读documentation时，

ngModel指令绑定输入，select，textarea（或自定义表单）使用NgModelController对范围内的属性进行控制由该指令创建和公开。

ngModel适用于input，select和textarea。因此，我不会将ng-model用于我自己的指令。

如果我是你，我只会使用plain属性，然后$ observe

因此，你的就像这样。

<date-range-editor range="{{vm.report.dateRange}}" />
<column-editor columns="{{vm.report.columns}}" />

由于你没有提供plnkr，我只能像以下一样抽象我的想法;

app.directive('dateRangeEditor', function(MyReport) {
  return  {
    link: function(scope, element, attrs) {
      attrs.$observe('range', function(range) {
        MyReport.setRange(range);
      }
    }
  }
})

我创建了ng-map，并且我在整个ng-map指令中都使用了这种方法。到目前为止，我发现这种方式简单有效。

通过指令协调Angular JS模型更改

1 个答案: