如何从AngularJS中的工厂功能到达范围

时间:2017-06-04 21:04:18

标签: javascript angularjs angularjs-scope ui-grid

我有一个ng-grid,其选项如下:

$scope.gridOptions = {
    enableRowSelection: true,
    enableSelectAll: true,
    selectionRowHeaderWidth: 35,
    rowHeight: 35,
    showGridFooter: false,
    enableColumnMenus: false,
    enableSorting: true,
    enableFiltering: true,
    columnDefs: [
        {
            name: "",
            field: "fake",
            cellTemplate: '<div class="ui-grid-cell-contents" >' +
            '<button value="Edit" ng-if="!row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.deleteRow($event)">Delete</button>' +
            '<button value="Edit" ng-if="!row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.enterEditMode($event)">Edit</button>' +
            '<button value="Edit" ng-if="row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.saveEdit($event)">Update</button>' +
            '<button value="Edit" ng-if="row.inlineEdit.isEditModeOn" ng-click="row.inlineEdit.cancelEdit($event)">Cancel</button>' +
            '</div>',
            enableCellEdit: false,
            enableFiltering: false,
            enableSorting: false,
            showSortMenu: false,
            enableColumnMenu: false,
            width: "10%"
        },
        {
            name: 'Id',
            visible: false
        },
        {
            name: 'Key',
            enableCellEdit: true,
            cellTemplate: '<div class="ui-grid-cell-contents"><div ng-class="{\'viewr-dirty\' : row.inlineEdit.entity[col.field].isValueChanged }">{{row.entity[col.field]}}</div></div>',
            width: "30%"
        },

        {
            name: 'Value',
            enableCellEdit: true,
            cellTemplate: '<div class="ui-grid-cell-contents"><div ng-class="{\'viewr-dirty\' : row.inlineEdit.entity[col.field].isValueChanged }">{{row.entity[col.field]}}</div></div>',
            width: "30%"
        }

    ]
}

我正在使用内联编辑,因此单元格中有按钮。其中一个按钮是删除。单击此按钮时,将从数据库中删除记录。但是我想在删除操作完成后刷新网格。我从工厂调用函数:

angular.module('ui.grid').factory('InlineEdit', function ($interval, $rootScope, $mdDialog, LocalizationService, AlertDialogFactory) {
function inlineEdit(entity, index, grid) {
    this.grid = grid;
    this.index = index;
    this.entity = {};
    this.isEditModeOn = false;
    this.init(entity);
}

inlineEdit.prototype = {
    init: function (rawEntity) {
        var self = this;

        for (var prop in rawEntity) {
            self.entity[prop] = {
                value: rawEntity[prop],
                isValueChanged: false,
                isSave: false,
                isCancel: false,
                isEdit: false
            }
        }
    },

    deleteRow: function (event) {
        event && event.stopPropagation();
        var self = this;

        self.isEditModeOn = false;

        for (var prop in self.entity) {
            self.entity[prop].isSave = true;
            self.entity[prop].isEdit = false;
        }
        LocalizationService.deleteRow(self.grid.rows[self.index]).then(function (result) {
            if (result.data.IsOk) {
                // CODE HERE...
            }
            else {
                AlertDialogFactory.ShowAlertDialog(result.data.Message, "ERROR");
            }
        });
    },
}
    return inlineEdit;
})

如果result.data.IsOk为真,我如何从工厂功能刷新gridOptions.data?我如何从工厂到达范围?

1 个答案:

答案 0 :(得分:0)

作为解决方案,您可以从$ rootScope广播事件。 它会是这样的:

$rootScope.$broadcast("rowDeleted");

并处理可以访问$ scope的事件。

$scope.$on("rowDeleted", deleteHandler);