Action Button in Angular UI Grid 3.x version

问题

I am trying to render a simple table using Angular UI Grid (unstable version). Against each row I need a button when clicked should be handled in my parent controller.

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="http://ui-grid.info/release/ui-grid-unstable.min.css">
  <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="http://ui-grid.info/release/ui-grid-unstable.css" 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>

As in code, to render the action button I have used columnDefs with inline template for the third column.

PROBLEM

Clicking the button doesn't work. I expect ' $scope.clickHandler' function to be executed on click. Also, I should be able to pass 'name' as argument to the click handler.

回答1:

In the new ui-grid everything happens in an isolated scope. So they added functionality to handle external scopes.

Here is what to do:

In the html define you grid like this:

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

Also add the external scope object (with a callable function) to your controller:

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

Finally define your cellTemplate like this:

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

Here is your forked Plunker

回答2:

Easier than @mainguy in my opinion is:

Adding grid.appScope. before your $scope member.
For example in your case to call $scope.clickHandler:

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

回答3:

Similar to @gdoron's answer but for controllerAs syntax. In your controller, you should set appScopeProvider option to point to this object:

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

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

FYI: by default, the parent scope of the ui-grid element will be assigned to grid.appScope this property allows you to assign any reference you want to grid.appScope

回答4:

Have notice, if you are using routing config instead of assigning the app-controller directly, getExternalScopes() method works as expected with one note

in the respective controller, assign the below statement $scope.gridScope = $scope;

来源：https://stackoverflow.com/questions/27621321/action-button-in-angular-ui-grid-3-x-version

标签

angularjs

angular-ui-grid