Angular UI-Grid-通过自定义指令更新单元格值时，事件afterCellEdit不触发

Question

I develop web application with AngularJS 1.5.0 and UI-Grid 3.1.1.

I need to have column with cross-browser datepicker, so I decided to use Bootstrap-Datepicker ( https://github.com/eternicode/bootstrap-datepicker ).

For this column I use customTemplate:

rejestrator.columnTemplates.dayCellEditable =
'<div class="column-day">' +
    '<span ng-model="row.entity.day" ng-change="updateDayCell(row, row.entity.day)" aa-date-input>{{ COL_FIELD | date:"yyyy-MM-dd" }}</span>'+
'</div>';

When I click on day cell, datepicker is invoked correctly, it even updates cell in row with chosen data, but unfortunately no function UpdateDayCell (ng-change) is fired nor even gridApi.edit.on.afterCellEdit...

I need to fire updateDayCell controller's function or fire event to listener on.afterCellEdit to send request to update my database.

My grid definition is:

$scope.myTaskGridOptions = {
    exporterMenuCsv: false,
    enableGridMenu: true,
    enableSorting: true,
    enableFiltering: false,
    enableCellEditOnFocus: true,
    columnDefs: [
        {
            name: 'Dzień', 
            field: 'day', 
            width: '130',
            sort: { direction: 'asc', priority: 0 }, 
            type: 'date',
            cellFilter: 'date:\'yyyy-MM-dd\'',
            cellTemplate: rejestrator.columnTemplates.dayCellEditable, 
            enableCellEdit:false
        },
        {
            name: 'Projekt',
            field: 'project_name', 
            editableCellTemplate: 'ui-grid/dropdownEditor',
            width: '15%', 
            editDropdownOptionsFunction : MyTasksProvider.getMyProjects
        },
        { 
          name: 'Opis',  
          field: 'description', 
          width: '50%' 
          },
        {
            name: 'Czas',      
            field: 'used_time' , 
            width: '75', 
            type: 'string',
            cellTemplate: rejestrator.columnTemplates.timeCell,
            enableCellEdit: false
        },
        {
          name: 'Akcje',
          field: 'id',
          enableSorting: false,  
          width: '90', 
           cellTemplate: rejestrator.columnTemplates.actionsCell,
          displayName: '',
          enableColumnMenu:false, 
          enableCellEdit: false
        }
    ],
    //Bind events
    onRegisterApi : function(gridApi){
        $scope.gridApi = gridApi;
        gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
            if (newValue !== oldValue) {
                var callback = function(){};
                var fieldToChange = colDef.field,
                    valueToSet = newValue;
                if (fieldToChange === 'project_name') {
                    fieldToChange = 'project_id';
                    callback = refreshGrid;
                } else if (fieldToChange == 'day') {
                    valueToSet = $filter('date')(newValue, "yyyy-MM-dd");
                    rowEntity.day = valueToSet;
                }
                CommonTasksProvider.updateTaskFieldByID(rowEntity.id, fieldToChange, valueToSet, callback);
            }
        });
        //gridApi.core.on.filterChange
    },
    //Disable multiselection
    multiSelect: true
};

EDIT:

I added watch for event 'aa:calendar:set-date' fired by Datepicker when value is set:

$scope.$on('aa:calendar:set-date', function(event, toState, toParams, fromState, fromParams){
    var dateObj = event.targetScope.$parent.ngModel,
        day = $filter('date')(dateObj, "yyyy-MM-dd"),
        taskId = event.targetScope.$parent.taskId;
    return CommonTasksProvider.updateTaskFieldByID(taskId, 'day', day)
});

And it works. Guys, do you think it is good solution? Angular-way? Or maybe performance expensive?

Answer 1

I used ui.bootstrap.datetimepicker :

var dateCellTemplate = 
                            ' <div layout="row" >' +
                            '    <wm-ai-grid-date-picker class="wm-ai-standalone-due-date"' +
                            '        data-ng-model="row.entity.timestamp_due"' +
                            '    ></wm-ai-grid-date-picker>' +
                            '</div>';

And this is my directive, (hope will help you):

app.directive('wmAiGridDatePicker', ['$timeout','$parse', function ($timeout, $parse) {
        return {//this datePicker will show the date in the wanted format and save it (ng-model) with the default format of yy-mm-dd
            template: '<input type="text"  style="cursor: pointer;border-color: rgb(239, 239, 239);height: 22px;padding-left: 6px;margin-right: 13px;margin-top: 10px;">',

            replace: true,
            require: 'ngModel',
            scope: {},
            link: function (scope, element, attrs, controller) {

                scope.time = {
                    hours: 0,
                    minutes: 0
                };

                var getModel = function () {
                     return controller.$modelValue;
                };

                var options = {
                   format: "dd/mm/yyyy"
                    ,autoclose: 'true'
                    //,startDate: $filter('date')(new Date().getTime(), 'dd/mm/yyyy')
                    //,startDate: "10/04/2015"
                    ,todayBtn: "linked"
                };

                element.datepicker(options);

                element.datepicker().on('hide', function () {

                    $timeout(function () {
                        var date_ = element.datepicker('getDate');

                        if(date_){
                            date_.setHours(scope.time.hours);
                        date_.setMinutes(scope.time.minutes);
                        //controller.$setViewValue(date_);
                        controller.$setViewValue(moment(date_).unix());
                        }


                        scope.$apply();
                    }, 1);
                });

                element.datepicker().on('changeDate', function () {

                    $timeout(function () {
                        var date_ = element.datepicker('getDate');

                        if(date_){
                            date_.setHours(scope.time.hours);
                        date_.setMinutes(scope.time.minutes);
                        //controller.$setViewValue(date_);
                        controller.$setViewValue(moment(date_).unix());
                        }


                        scope.$apply();
                    }, 1);

                });

                scope.onModelChange = function () {

                    console.log('onModelChange');

                    var date = controller.$modelValue;

                        if(angular.isDate(date)){
                            scope.time.hours = date.getHours();
                            scope.time.minutes = date.getMinutes();
                        }

//                    if (controller) {
//                        controller.$render();
//                     }
                };

               controller.$render = function () {
                        var unixDate = controller.$modelValue;

                        if(!unixDate){
                            return;
                        }

                        var date = new Date(unixDate * 1000);

                        if(angular.isDate(date)){
                            scope.time.hours = date.getHours();
                            scope.time.minutes = date.getMinutes();
                        }



//                        if (angular.isDefined(date) && date !== null && !angular.isDate(date)) {
//                            if (angular.isString(controller.$modelValue)) {
//                                date = controller.$modelValue; //uiDateConverter.stringToDate(attrs.uiDateFormat, controller.$modelValue);
//                            } else {
//                                throw new Error('ng-Model value must be a Date, or a String object with a date formatter - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
//                            }
//                        }
                        element.datepicker('setDate', date);
                        element.datepicker('update');
                    };

                scope.$watch(getModel, function (newVal) {
                   // if (typeof newVal !== undefined && newVal != null && newVal != "") {

                        scope.onModelChange();
                    //}
                }, true);


                if (controller) {
                    controller.$render();
                }
            }
        };
    }]);