Javascript 在Angular 1.5组件实例中隔离事件

我创建了一个组件，用于向HTML表添加“数据网格”功能。标题可以单击，以允许对该列上的数据进行排序（升序/降序）。到目前为止，它工作得很好，除非我在同一页上有两个组件实例。单击一个表中的标题时，它会影响两个表

我是否缺少一种方法来隔离组件的事件以仅影响该实例

组成部分：

    angular.module('app')
        .component('datagrid', {
            templateUrl:'components/datagrids/datagrids.component.html',
            controller:DatagridController,
        })

控制员（工作正在进行中，我知道现在有点混乱！）：

函数DatagridController（$filter，datagridService）{ var ctrl=this； ctrl.today=新日期（）； ctrl.sortBy=null； ctrl.fields=[]； ctrl.data=[]； ctrl.update=函数（）{ var-service=datagridService； log（datagridService）； var updatedFields=[]； log（datagridService.fields）； 对于（var i=0；ib）-（b>a））； } }; ctrl.toggleSortDirection=函数（索引）{ 控制台日志（索引）； var field=ctrl.fields[index]； 控制台日志（字段）； var fieldName=field.name； console.log（字段名）； var direction=ctrl.fields[index].direction； 控制台日志（方向）； 变量反向=（方向='上升'）？真：假； 控制台日志（反向）； 变量方向=（方向==‘升序’？‘降序’：‘升序’； 控制台日志（方向）； 对于（变量i=0；i 模板：

<table ng-if="$ctrl.data.length > 0" class="datagrid">
    <caption ng-if="$ctrl.caption">{{ $ctrl.caption }}</caption>
    <colgroup ng-if="$ctrl.colgroup.length > 0">
        <col ng-repeat="col in $ctrl.colgroup">
    </colgroup>
    <thead ng-if="$ctrl.hasHeader = true">
        <tr>    
            <th ng-repeat="field in $ctrl.fields" ng-click="$ctrl.toggleSortDirection($index)" data-sortable="true">{{ field.name }}<div ng-class="field.direction"></div></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="record in $ctrl.data">
            <td ng-repeat="field in $ctrl.fields">
                <span ng-if="!$ctrl.validDatetime(record[(field.name|toCamelCase)])"><a>{{ record[(field.name|toCamelCase)] }}</a></span>
                <span ng-if="$ctrl.validDatetime(record[(field.name|toCamelCase)])"><a>{{ record[(field.name|toCamelCase)] | date: 'dd-MMM-yyyy' }}</a></span>
            </td>
        </tr>
    </tbody>
    <tfoot ng-if="$ctrl.hasFooter = true">
        <td colspan="{{ $ctrl.fields.length }}">Last Updated: {{ $ctrl.today | date: 'dd-MMM-yyyy' }}</td>
    </tfoot>
</table>

{{$ctrl.caption}
{{field.name}
{{record[（field.name | toCamelCase）]}
{{record[（field.name | toCamelCase）]|日期：'dd-MMM-yyyy'}
上次更新：{{$ctrl.today}日期：'dd-MMM-yyyy'}

组件标签：

<datagrid></datagrid>

---

组件在默认情况下是隔离的，这意味着每个实例都有自己的

$ctr

问题是数据是通过服务共享的。例如，您在第一个实例中执行

datagridService.data.sort

它更改服务中的数据=>它会反映在组件的所有实例中（内存中有一个

data

对象，您正试图访问）

一种修复方法可能是为每个组件实例制作数据副本

ctrl.data = Object.assign([], datagridService.data);

---

不要直接在

datagridService.data

上进行任何操作，而是使用

ctrl.data

如何在模板中分配控制器？我有一个类似的应用程序，其中多个和类似的DOM对象分配了相同的控制器。默认情况下，它们都有自己的控制器实例。我一直在遵循我在角度组件上找到的文档，根据我所读的内容，控制器被分配给该组件。我还没有看到任何控制器在这个方法中被附加到模板的例子。然后通过标记a heap，oKonyk将组件放入页面中。我是如此专注于这些例子，以至于我没有想到去看那些！当然很乐意帮忙！

ctrl.data = Object.assign([], datagridService.data);