问题描述
角度 UI 网格之外有一个按钮.我想在默认"按钮单击时调用一个函数并将网格对象参数发布到回调函数.
There is a button outside of angular UI grid.I would like to call a function on "Default" button click and post grid object parameter to the callback function.
还有第二个例子.但是我不想将网格对象发布到网格内的按钮上,而是将网格对象发布到网格外的按钮上.
There is a second example as well. But instead of posting grid object to the buttons inside of the grid I would like to post the grid object to the button outside of the grid.
长话短说,我希望在网格外有一个编辑按钮(选择一个行模式已打开),而不是添加一列没有选择行选项的编辑按钮.
是否可以从 v3.1.0 开始?http://plnkr.co/edit/JyiN7MejqkiTuvczsOk1
Is it possible starting from v3.1.0?http://plnkr.co/edit/JyiN7MejqkiTuvczsOk1
由于某些原因,当我在 MainCtrl 中展开 $scope 对象时,gridOptions.appScopeProvider 为 null.这是 js 代码示例:
For some reason gridOptions.appScopeProvider is null when I expand $scope object in MainCtrl.Here is js-code sample:
angular.module('modal.editing', ['ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.bootstrap', 'schemaForm'])
.constant('PersonSchema', {
type: 'object',
properties: {
name: { type: 'string', title: 'Name' },
company: { type: 'string', title: 'Company' },
phone: { type: 'string', title: 'Phone' },
'address.city': { type: 'string', title: 'City' }
}
})
.controller('MainCtrl', MainCtrl)
.controller('RowEditCtrl', RowEditCtrl)
.service('RowEditor', RowEditor)
;
MainCtrl.$inject = ['$http', 'RowEditor', '$modal'];
function MainCtrl ($http, RowEditor) {
var vm = this;
vm.editRow = RowEditor.editRow;
vm.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
selectionRowHeaderWidth: 35,
columnDefs: [
{ field: 'id', name: '', cellTemplate: 'edit-button.html', width: 34 },
{ name: 'name' },
{ name: 'company' },
{ name: 'phone' },
{ name: 'City', field: 'address.city' },
]
};
vm.test = function() {
debugger;
};
$http.get('http://ui-grid.info/data/500_complex.json')
.success(function (data) {
vm.gridOptions.data = data;
});
}
RowEditor.$inject = ['$rootScope', '$modal'];
function RowEditor($rootScope, $modal) {
var service = {};
service.editRow = editRow;
function editRow(grid, row) {
debugger;
$modal.open({
templateUrl: 'edit-modal.html',
controller: ['$modalInstance', 'PersonSchema', 'grid', 'row', RowEditCtrl],
controllerAs: 'vm',
resolve: {
grid: function () { return grid; },
row: function () { return row; }
}
});
}
return service;
}
function RowEditCtrl($modalInstance, PersonSchema, grid, row) {
var vm = this;
vm.schema = PersonSchema;
vm.entity = angular.copy(row.entity);
vm.form = [
'name',
'company',
'phone',
{
'key': 'address.city',
'title': 'City'
},
];
vm.save = save;
function save() {
// Copy row values over
row.entity = angular.extend(row.entity, vm.entity);
$modalInstance.close(row.entity);
}
}
推荐答案
这正是 onRegisterApi 的用途:
That is exactly what onRegisterApi is for:
vm.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
selectionRowHeaderWidth: 35,
columnDefs: [
{ field: 'id', name: '', cellTemplate: 'edit-button.html', width: 34 },
{ name: 'name' },
{ name: 'company' },
{ name: 'phone' },
{ name: 'City', field: 'address.city' },
],
onRegisterApi: function (gridApi){
vm.gridApi = gridApi;
}
};
然后 gridApi 将在您的范围内(vm.gridApi),您可以访问网格和 gridApi.grid 中的所有行.
Then the gridApi will be in your scope (vm.gridApi) and you can access the grid and all the rows in gridApi.grid.
希望这会有所帮助.
这篇关于如何从外部访问 UI-Grid 隔离范围?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!