2016-03-01 54 views
0

我正在使用Angular UI-Grid v3.0.4。我正在使用columndef單元格模板來獲取所需的定製,如下所示(我在模板中有ng-blur事件和方法)。角度Ui網格模糊事件不會觸發

$scope.gridOptions = { 
      showColumnFooter: true, 
      columnDefs: [ 
         { 
          name: "SalesAmount", displayName: "Sales Amount" 
         }, 
         { 
          name: "CommissionAmount", displayName: "Commission Amount", enableCellEdit: true, enableCellEditOnFocus: true, 
          cellTemplate: '<input type="text" ng-model="row.entity.pddCommissionAmount" ng-blur="updateEntitys(row.entity)"></input>' 
         } 

         ] 
        }; 

ng-blur事件不會觸發其執行。研究並添加一個自定義ngblur指令,看看是否有幫助

app.directive('ngBlur', function() { 
    return function (scope, elem, attrs) { 
     elem.bind('blur', function() { 
      scope.$apply(attrs.ngBlur); 
     }); 
    }; 
}); 



$scope.updateEntitys = function (row) { 
      alert("Update Entitys within ngblur event"); 
     } 

這似乎不工作。非常感謝任何幫助。

回答

2

我不太瞭解ui-grid,但我相當肯定,爲什麼它不起作用的原因是,所謂的「cellTemplate」中的html永遠不會被編譯,因爲它實際上並不是角模板。我相信你可以使用$compile找到解決方法,將html傳遞給cellTemplate,同時將對象保存到某個變量,但我也認爲這將是一種令人難以置信的方式來做你想做的事(不管是什麼?)。

相反,我認爲你應該看看有關編輯功能的UI網格文件:http://ui-grid.info/docs/#/tutorial/201_editable

認爲這是你真正想要的東西:

$scope.gridOptions.onRegisterApi = function(gridApi) { 
    $scope.gridApi = gridApi; 
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) { 
    console.log('edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue); 
    $scope.$apply(); 
    }); 
}; 

http://plnkr.co/edit/GJfBpn0kIkhgrPAPUYSb?p=preview