如何从外部访问UI-Grid隔离范围? [英] How can I access UI-Grid isolate scope from outside?

问题描述

角度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隔离范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！