angularjs - columndefs - Botón de acción en versión Angular UI Grid 3.x
ui-grid columndefs (4)
En el nuevo ui-grid todo sucede en un ámbito isolated . Así que agregaron funcionalidad para manejar ámbitos external .
Esto es lo que hay que hacer:
En el html definimos tu grilla así:
<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">
También agregue el objeto de alcance externo (con una función de llamada) a su controlador:
$scope.clickHandler = {
onClick : function(value){
alert(''Name: ''+value);
}
};
Finalmente define tu plantilla de celular de esta manera:
{
name:''Action'',
cellTemplate: ''<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>''
}
Aquí está su Plunker bifurcado
Estoy intentando renderizar una tabla simple utilizando Angular UI Grid (versión inestable) . Contra cada fila, necesito un botón cuando se hace clic en mi controlador principal.
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>
Como en el código, para representar el botón de acción, he usado columnDefs con plantilla en línea para la tercera columna.
PROBLEMA
Hacer clic en el botón no funciona. Espero que la función '' $ scope.clickHandler '' se ejecute al hacer clic. Además, debería poder pasar ''nombre'' como argumento al controlador de clic.
Más fácil que @mainguy en mi opinión es:
Añadiendo grid.appScope. antes de su miembro $ scope.
Por ejemplo, en su caso para llamar a $scope.clickHandler :
cellTemplate:''<button ng-click="grid.appScope.clickHandler()">Click Here</button>''
Similar a la respuesta de @ gdoron, pero para la sintaxis de controllerAs . En su controlador, debe configurar la opción appScopeProvider para que apunte a this objeto:
this.gridOptions = {
...,
appScopeProvider: this
};
Luego, cellTemplate:''<button ng-click="grid.appScope.clickHandler()">Click Here</button>''
Para su información : de forma predeterminada, el alcance principal del elemento ui-grid se asignará a grid.appScope esta propiedad le permite asignar cualquier referencia que desee a grid.appScope
Tenga en cuenta que, si está utilizando configuración de enrutamiento en lugar de asignar directamente el controlador de la aplicación, el método getExternalScopes () funciona como se espera con una nota
en el controlador respectivo, asigne la siguiente declaración $ scope.gridScope = $ scope;