javascript - 隔离 Angular 1.5 组件实例中的事件

Question

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

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

组件:

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

Controller (正在进行中，我知道目前有点困惑!):

function DatagridController($filter, datagridService){
    var ctrl = this;
    ctrl.today = new Date();
    ctrl.sortBy = null;
    ctrl.fields = [];
    ctrl.data = [];
    ctrl.update = function(){
        var service = datagridService;
        console.log(datagridService);
        var updatedFields = [];
        console.log(datagridService.fields);
        for(var i = 0; i < datagridService.fields.length; i++){
            var fieldName = datagridService.fields[i];
            var fieldDirection = (ctrl.fields.length === 0) ? 'ascending' : ctrl.fields[i].direction;
            updatedFields.push({name:fieldName, direction:fieldDirection});
        }
        ctrl.fields = updatedFields;
        console.log(ctrl.fields)
        if (ctrl.sortBy == null){ ctrl.sortBy = $filter('toCamelCase')(ctrl.fields[0].name); }
        ctrl.data = datagridService.data.sort(ctrl.sortData(ctrl.sortBy));
        ctrl.today = new Date();
    };
    ctrl.sortData = function(field, reverse, primer){
        console.log(field + ' | ' + reverse)
        var key = primer ? 
            function(x) {return primer(x[field])} : 
            function(x) {return x[field]};
        reverse = !reverse ? 1 : -1;
        ctrl.sortBy = field;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    };
    ctrl.toggleSortDirection = function(index){
        console.log(index);
        var field = ctrl.fields[index];
        console.log(field);
        var fieldName = field.name;
        console.log(fieldName);
        var direction = ctrl.fields[index].direction;
        console.log(direction);
        var reverse = (direction == 'ascending') ? true : false;
        console.log(reverse);
        var direction = (direction === 'ascending') ? 'descending' : 'ascending';
        console.log(direction);
        for(var i = 0; i < ctrl.fields.length; i++){
            ctrl.fields[i].direction = 'ascending';
        }
        ctrl.fields[index].direction = direction;
        ctrl.data.sort(ctrl.sortData($filter('toCamelCase')(fieldName), reverse));
    };
    ctrl.validDatetime = function(dt){
        //this should probably be a service
        console.log(dt);
        var rx = /([0-9]{4})\-([0-9]{2})\-([0-9]{2})/;
        if(dt.match(rx)){ console.log(dt); }
        return (dt.match(rx)) ? true : false;
    };
    ctrl.$onInit = ctrl.update();
}
DatagridController.$inject = ['$filter', 'datagridService'];

模板:

<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>

组件标签:

<datagrid></datagrid>

Answer 1

组件默认是隔离的，这意味着每个实例都有自己的 $ctr。

事实是数据是通过服务共享的。例如，您在第一个实例中执行 datagridService.data.sort => 它会更改服务中的数据 => 它会反射(reflect)在组件的所有实例中(有一个 data 对象在内存中，您正在尝试访问)。

一个解决办法可能是为每个组件实例制作数据副本。

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

不要直接对 datagridService.data 进行任何操作，而是使用 ctrl.data