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

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

例如，我有一个报告定义，看起来像：

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是否更好？或者也许我的指令应该发出我的控制器可以处理的事件。这些方法的优点和缺点是什么？还有其他我应该看的东西吗？

来源

2014-10-20 Brian Vallelunga

你直接绑定到模型，那么为什么你需要回调？ – Josh 2014-10-20 15:37:06

我需要在报告定义更改时重新运行报告。但我不确定是否只是看报告定义的变化是最好的方式去这里。例如，在日期选择器上，我只想在开始日期和结束日期都发生变化之后重新运行报告，而不是在开始日期已更改但结束日期已更改之前。那有意义吗？ – 2014-10-20 15:40:11

当您在documentation读，

的ngModel指令结合使用NgModelController，这是创建和露出的输入，选择，文本区域（或定制的形式控制）上的范围的特性这个指令。

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

如果我是你，我会简单地使用普通的属性，然后$观察

因此，你会喜欢这一点。

<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-地图指示。到目前为止，我发现这种方式简单而有效。

来源

2014-10-20 16:50:21 allenhwkim

关于ngModel的好处，虽然这不是真正的问题。在你的场景中，MyReport会成为一项服务吗？如果我用这种方式构建我的指令，那么我总是将它们绑定到MyReport服务。这可能是好的，但日期范围编辑器之类的东西可以用于非报表服务。 – 2014-10-20 17:11:48

@BrianVallelunga，你现在问的是指令如何沟通。您可以使用符合您的要求的服务或事件（$ emit，$ broadcast）。 – allenhwkim 2014-10-20 17:45:29

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

回答

相关问题