Кнопка действия в Angular UI Grid 3.x версия

Я пытаюсь сделать простую таблицу, используя Angular UI Grid (нестабильная версия). Против каждой строки мне нужна кнопка при нажатии, которую нужно обработать в моем родительском контроллере.

Plunker

Javascript: -

angular.module("app", ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.expandable', 'ui.grid.paging']).controller("appController", function($scope) {
  console.log("Controller is up.");
  $scope.data = [];
  for (var i = 0; i < 50; i++) {
    $scope.data.push({
      fullName: "Name" + i,
      age: i
    });
  }

  $scope.clickHandler = function(){
    // this never gets invoked ?!
    console.log("Row Action click Handler.");
  };


  $scope.gridOptions = {
    data: $scope.data,
    columnDefs:[ {name:'fullName',field:'fullName'},
              {name:'age',field:'age'},
              {name:' ',cellTemplate:'<div><button ng-click="clickHandler()">Click Here</button></div>'}
            ]
  };
});

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="#" onclick="location.href='http://ui-grid.info/release/ui-grid-unstable.min.css'; return false;">
  <link rel="stylesheet" href="style.css">
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="#" onclick="location.href='http://ui-grid.info/release/ui-grid-unstable.css'; return false;" type="text/css">
  <script src="script.js"></script>
</head>

<body data-ng-app="app">
  <h1>Angular UI Grid unstable</h1>
  <div data-ng-controller="appController">
    <div class="grid" ui-grid="gridOptions">
      Test 
    </div>
  </div>

</body>

</html>

Как и в коде, для отображения кнопки действия я использовал columnDefs с встроенным шаблоном для третьего столбца.

ПРОБЛЕМА

Нажатие кнопки не работает. Я ожидаю, что функция " $scope.clickHandler" будет выполнена при нажатии. Кроме того, я должен иметь возможность передать "имя" в качестве аргумента обработчику кликов.

Ответ 1

В новом ui-grid все происходит в области isolated. Поэтому они добавили функциональные возможности для обработки областей external.

Вот что делать:

В html определите сетку следующим образом:

<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">

Также добавьте к вашему контроллеру внешний объект области видимости (с вызываемой функцией):

 $scope.clickHandler = {
     onClick : function(value){
        alert('Name: '+value);
     }
 };

Наконец, определите свой cellTemplate следующим образом:

{
    name:'Action',
    cellTemplate: '<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>'
}

Вот ваш разветвленный Plunker

Ответ 2

На мой взгляд проще, чем @mainguy:

Добавление grid.appScope. до вашего члена области $.
Например, в вашем случае для вызова $scope.clickHandler:

cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'

Ответ 3

Как и для ответа @gdoron, но для синтаксиса controllerAs. В вашем контроллере вы должны установить параметр appScopeProvider для указания на объект this:

this.gridOptions = {
  ...,
  appScopeProvider: this
};

Тогда cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'

FYI: по умолчанию родительская область элемента ui-grid будет назначена grid.appScope. Это свойство позволяет вам назначить любую ссылку, которую вы хотите для grid.appScope

Ответ 4

Обратите внимание, что если вы используете конфигурацию маршрутизации вместо прямого назначения приложения-контроллера, метод getExternalScopes() работает как ожидается с одной записью

в соответствующем контроллере, присвойте оператор ниже $scope.gridScope = $scope;