AngularJS 및 ui-grid 상호 작용 $ resource

저는 앵귤러 형 JS에 처음 접했고 분명히 ui- 그리드에도 적용되었습니다. $ resource를 사용하여 그리드에 표시 할 데이터가 있고 행을 편집하고 저장할 수있게하여 다음 단계로 이동하려고합니다.

예를 들어 Saving row data with AngularJS ui-grid $scope.saveRow을 사용하여 Plunker http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5을 만들었습니다. 하지만, 어떤 이유인지 나는 짐작할 수 없다. 실제로 작동하지 않고 실제로 예외를 생성한다. gridApi.rowEdit.on.saveRow (self, self.saveRow);

저는 왜 그랬는지 이해하기가 힘듭니다. saveRow 함수는 비어 있지만이 단계의 목표는 단순히 행을 편집 할 때 호출하는 것입니다.

도움을 주시면 감사하겠습니다.

Plunker의 코드는 다음과 같습니다

(function() { 
    var app = angular.module('testGrid', ['ngResource', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit' /*, 'ui.grid.cellNav'*/ ]); 

    app.factory('Series', function($resource) { 
     return $resource('/api/series/:id', { 
      id: '@SeriesId' 
     }); 
    }); 

    var myData = [{ 
     SeriesId: 1, 
     SeriesName: 'Series 1' 
    }, { 
     SeriesId: 2, 
     SeriesName: 'Series 2' 
    }]; 

app.directive('gridContent', function() { 
var deleteTemplate = '<input type="button" value="Delete" ng-click="getExternalScopes().deleteRow(row)" />'; 
var commandheaderTemplate = '<input type="button" value="Add Series" ng-click="getExternalScopes().addNew()" />'; 

return { 
    restrict: 'E', 
    templateUrl: 'grid.html', 
    controllerAs: 'gridseries', 
    controller: function(Series) { 
    var self = this; 

    this.saveRow = function(rowEntity) { 
     i = 0; 
    }; 

    this.gridOptions = {}; 
    this.gridOptions.columnDefs = [{ 
     name: 'SeriesId', 
     visible: false 
    }, { 
     name: 'SeriesName', 
     displayName: 'Name', 
     enableCellEdit: true 
    }, { 
     name: 'Command', 
     displayName: 'Command', 
     cellTemplate: deleteTemplate, 
     headerCellTemplate: commandheaderTemplate 
    }]; 

    this.gridOptions.onRegisterApi = function(gridApi) { 
     self.gridApi = gridApi; 
     gridApi.rowEdit.on.saveRow(self, self.saveRow); 
    }; 

    this.gridOptions.data = myData; 

    this.gridScope = { 
     deleteRow: function(row) { 
     var index = myData.indexOf(row.entity); 
     self.gridOptions.data.splice(index, 1); 
     }, 

     addNew: function() { 
     self.gridOptions.data.push({ 
      SeriesName: 'Add a name' 
     }); 
     } 
    }; 
    } 
}; 

}); 
})();

나는 코드가 절단 제대로 붙여하지만 모든 코드가 Plunker에 어떤 식 으로든하지 않았는지 모른다.

미리 감사드립니다.

출처

2015-02-07 Martin Horton

여기서 주된 문제는 $ scope 설정 대신 컨트롤러를 구문으로 사용한다는 것입니다. 이벤트를 등록하려면 $ scope가 필요합니다. 이벤트 처리기는 해당 $ scope의 destroy 이벤트가 발생하면 다시 제거됩니다.

약식 해결 방법은 대신 $ rootScope를 사용하는 것이지만 시간이 지남에 따라 메모리 누수가 발생할 수 있습니다.

gridApi.rowEdit.on.saveRow($rootScope, self.saveRow);

은 참조 :이 코드는 약간 나이 때문에, 차라리 externalScope보다 새로운 appScope 준비로 업데이트했다

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

출처

2015-03-15 23:49:14 PaulL

AngularJS 및 ui-grid 상호 작용 $ resource

답변

관련 문제