How to reach scope from factory function in AngularJS

Question

I have a ng-grid and its options are as following:

$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%"
        }

    ]
}

I am using inline edit so there are buttons in cell. One of these buttons is delete. When I click this button, record is deleted from database. However I want the grid to be refreshed after deleting operation is finished. I call functions from factory:

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;
})

if result.data.IsOk is true, How can i refresh gridOptions.data from factory function? How can i reach to scope from factory?

Answer 1

As a solution you can broadcast an event from $rootScope. It will be like this:

$rootScope.$broadcast("rowDeleted");

And handle that event in place where you have access to $scope.

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