如何从 AngularJS 中的工厂函数到达作用域

Question

我有一个 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？我怎样才能从工厂到达范围？

Answer 1

作为解决方案，您可以从 $rootScope 广播一个事件。它将是这样的：

$rootScope.$broadcast("rowDeleted");

并在您有权访问 $scope 的地方处理该事件。

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

如何从 AngularJS 中的工厂函数到达作用域

How to reach scope from factory function in AngularJS

javascript

angularjs

angularjs-scope

ui-grid