web-dev-qa-db-fra.com

Bouton d'action dans la version 3.x de l'interface utilisateur angulaire

J'essaie de rendre un tableau simple en utilisant Grille de l'interface utilisateur angulaire (version instable) . Sur chaque ligne, j'ai besoin d'un bouton lorsque l'utilisateur clique dessus doit être géré dans mon contrôleur parent.

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>

Comme dans le code, pour rendre le bouton d'action, j'ai utilisé columnDefs avec un modèle en ligne pour la troisième colonne.

PROBLÈME

En cliquant sur le bouton ne fonctionne pas. J'attends que la fonction '$ scope.clickHandler' soit exécutée au clic. De plus, je devrais pouvoir passer «nom» comme argument au gestionnaire de clics.

angularjsangular-ui-grid
22
Kumar Sambhav

Dans le nouveau ui-grid, tout se passe dans une étendue isolated. Ils ont donc ajouté des fonctionnalités pour gérer les étendues external.

Voici ce qu'il faut faire:

Dans le code HTML, définissez votre grille comme ceci:

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

Ajoutez également l'objet scope externe (avec une fonction appelable) à votre contrôleur:

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

Définissez enfin votre cellTemplate comme ceci:

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

Voici votre forked Plunker

21
mainguy

Plus facile que @mainguy à mon avis est:

Ajout de grid.appScope. avant votre membre $ scope.
Par exemple, dans votre cas, appelez $scope.clickHandler:

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

Similaire à la réponse de @ gdoron mais avec la syntaxe controllerAs. Dans votre contrôleur, vous devez définir l'option appScopeProvider pour qu'elle pointe vers l'objet this:

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

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

FYI: par défaut, la portée parente de l'élément ui-grid sera assignée à grid.appScope cette propriété vous permet d'affecter n'importe quelle référence à grid.appScope

6
lvarayut

Si vous utilisez la configuration de routage au lieu d'affecter directement le contrôleur de l'application, la méthode getExternalScopes () fonctionne comme prévu avec une note

dans le contrôleur respectif, affectez l'instruction ci-dessous $ scope.gridScope = $ scope;

0
vonbalaji