With the Angular directives you can build reusable components, witch can accept parameters and scope variables, and witch can have customized behaviours.
It can be nested and communicate between them with functions and parameters.
We can using the directives for implement a dynamic HTML table grid, with dynamics rows and columns.
Grid model
In order to display the content, a class model is needed.
This model need to have the list of columns and the row elements:
import models = AngularTablesDataManagerApp.Models;
export class Grid {
Title: string;
Columns: Array<MetadataProperty>;
Rows: Array<Row>;
}
export class Row {
Entity: models.IEntity;
Name: string;
Properties: Array<RowProperty>;
constructor(entity: models.IEntity, name: string, datas: Array<RowProperty>) {
this.Entity = entity;
this.Name = name;
this.Properties = datas;
}
}
export class MetadataProperty {
Name: string;
Type: string;
Nullable: boolean;
}
export class RowProperty {
Name: string;
Value: string;
Nullable: boolean;
constructor(name: string, value: string, nullable: boolean) {
this.Name = name;
this.Value = value;
this.Nullable = nullable;
}
}
A column is of type MetadataProperty, and have a name, a type and a nullable property.
A row is composed by the entity binded to the row, the name of the entity and an array of RowProperty; these properties contains the values of the fields, witch will be displayed in the grid.
Grid directive
The next step is the main Grid directive; the first element to define is the scope, that have the list, some other properties and the definition of the CRUD methods:
interface IGridItem {
item: models.Row;
}
interface IGridDirectiveScope extends ng.IScope {
list: models.Grid;
item: models.Row;
rowModel: models.Row;
newItem: boolean;
New(): void;
Save(item: IGridItem): void;
Delete(item: IGridItem): void;
Close(): void;
}
The implementation of the CRUD methods is in the grid directive controller:
class GridController {
$scope: IGridDirectiveScope;
constructor($scope: IGridDirectiveScope) {
this.$scope = $scope;
}
public Edit(item: models.Row) {
this.$scope.item = item;
this.$scope.newItem = false;
}
public New() {
this.$scope.item = new models.Row(angular.copy(this.$scope.rowModel.Entity), this.$scope.rowModel.Name, angular.copy(this.$scope.rowModel.Properties));
this.$scope.newItem = true;
}
public Save(item: models.Row) {
var obj: IGridItem = { item: item };
this.$scope.Save(obj);
}
public Delete(item: models.Row) {
this.$scope.item = null;
var obj: IGridItem = { item: item };
this.$scope.Delete(obj);
}
public Close() {
if (!this.$scope.newItem) {
for (var i = 0; i < this.$scope.item.Properties.length; i++) {
this.$scope.item.Properties[i].Value = (<any>this.$scope.item.Entity)[this.$scope.item.Properties[i].Name];
}
}
this.$scope.item = null;
}
}
export class GridDirective implements ng.IDirective {
public restrict = 'E';
public templateUrl = 'app/directives/grid.html';
public scope = {
list: '=',
rowModel: '=',
order: '@order',
New: '&new',
Save: '&save',
Delete: '&delete'
};
public controller = GridController;
}
The grid directive scope accept the list of the objects to show, the row model and the order of the grid; it also accept the references of the CRUD methods, because we’ll need to add the business logic; the & character means that we want to pass a parameter to the expression defined in the attribute.
In our case, we want to pass the object selected to the function.
Nested directives
The grid directive will hold the other directives necessary to render the grid:
interface IGridListDirectiveScope extends ng.IScope {
gridItem: models.Row;
New(): void;
}
export class GridListDirective implements ng.IDirective {
public require = '^grid';
public restrict = 'E';
public templateUrl = 'app/directives/gridList.html';
public scope = {
list: '=',
order: '='
};
public link = (scope: IGridListDirectiveScope, element: ng.IAugmentedJQuery, attrs: IArguments, gridCtrl: GridController) => {
scope.New = () => {
gridCtrl.New();
}
}
}
export class GridColumnDirective implements ng.IDirective {
public restrict = 'A';
public templateUrl = 'app/directives/gridColumn.html';
public scope = {
gridColumn: '='
};
}
interface IGridRowDirectiveScope extends ng.IScope {
gridRow: models.Row;
Edit(): void;
}
export class GridRowDirective implements ng.IDirective {
public require = '^grid';
public restrict = 'A';
public templateUrl = 'app/directives/gridRow.html';
public scope = {
gridRow: '='
};
public link = (scope: IGridRowDirectiveScope, element: ng.IAugmentedJQuery, attrs: IArguments, gridCtrl: GridController) => {
scope.Edit = () => {
gridCtrl.Edit(scope.gridRow);
}
}
}
export class GridCellDirective implements ng.IDirective {
public restrict = 'A';
public templateUrl = 'app/directives/gridCell.html';
public scope = {
gridCell: '='
};
}
interface IGridItemDirectiveScope extends ng.IScope {
item: models.Row;
metadata: Array<models.MetadataProperty>;
isNew: boolean;
GetMetadataProperty(Name: string): models.MetadataProperty;
Save(): void;
Delete(): void;
Close(): void;
}
export class GridItemDirective implements ng.IDirective {
$filter: ng.IFilterService;
public require = '^grid';
public restrict = 'E';
public templateUrl = 'app/directives/gridItem.html';
public scope = {
item: '=',
metadata: '=',
isNew: '='
};
public link = (scope: IGridItemDirectiveScope, element: ng.IAugmentedJQuery, attrs: IArguments, gridCtrl: GridController) => {
scope.Save = () => {
gridCtrl.Save(scope.item);
}
scope.Delete = () => {
gridCtrl.Delete(scope.item);
}
scope.Close = () => {
gridCtrl.Close();
}
scope.GetMetadataProperty = (Name: string) => {
return this.$filter('filter')(scope.metadata, { 'Name': Name })[0];
}
}
public constructor($filter: ng.IFilterService) {
this.$filter = $filter;
}
}
The require attribute with ^ character means that the directive searches for the controller on its own element or its parent.
So, in the link function of the directive you can call a function in the controller of the directive specified in the require attribute.
Grid directives views
The implementation of the views is simple; the first view is the grid:
<div ng-show="item == null"> <grid-list list="list" order="order"></grid-list> </div> <div ng-show="item != null"> <grid-item item="item" metadata="list.Columns" is-new="newItem"></grid-item> </div>
The GridList view contains the columns and the rows of the grid:
<div class="row bootstrap-admin-no-edges-padding" style="margin-top: 10px;">
<div class="col-md-12">
<input type="button" id="btn-new" value="New" class="btn btn-primary" ng-click="New()" />
</div>
</div>
<div class="row bootstrap-admin-no-edges-padding" style="margin-top: 10px;">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">
{{list.Title}}
</div>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="column in list.Columns" grid-column="column"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in list.Rows | orderBy: 'Entity.' + order" grid-row="row"></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
GridColumn, GridRow and GridCell compose the table structure; the GridItem view is the detail of the row:
<div class="row bootstrap-admin-no-edges-padding" style="margin-top: 10px;">
<div class="col-md-12">
<input type="button" id="btn-save" value="Save" class="btn btn-primary" ng-click="Save()" ng-disabled="form.$invalid" />
<input type="button" id="btn-delete" value="Delete" class="btn btn-danger" ng-click="Delete()" ng-show="!isNew" />
<input type="button" id="btn-close" value="Close" class="btn btn-default" ng-click="Close()" />
</div>
</div>
<div class="row bootstrap-admin-no-edges-padding" style="margin-top: 10px;">
<div class="col-md-12">
<form name="form" role="form">
<div class="panel panel-default">
<div class="panel-heading">
<div class="text-muted bootstrap-admin-box-title">
{{item.Name}}
</div>
</div>
<div class="panel-body">
<div class="form-group" ng-repeat="property in item.Properties">
<label for="{{property.Name}}">{{property.Name}}:</label>
<input field tipology="GetMetadataProperty(property.Name)" id="{{property.Name}}" class="form-control" ng-model="property.Value" ng-required="!property.Nullable" />
</div>
</div>
<div class="col-md-2"></div>
</div>
</form>
</div>
</div>
Application
To use the directive you need to load the model, the rows and define the CRUD methods:
import ngr = ng.resource;
import commons = AngularTablesDataManagerApp.Commons;
import models = AngularTablesDataManagerApp.Models;
import services = AngularTablesDataManagerApp.Services;
export class CitiesController {
grid: models.Grid;
rowModel: models.Row;
toaster: ngtoaster.IToasterService;
private citiesService: services.CitiesService;
private constant: commons.Constants;
constructor(toaster: ngtoaster.IToasterService, CitiesService: services.CitiesService) {
this.citiesService = CitiesService;
this.constant = commons.Constants;
this.toaster = toaster;
this.grid = new models.Grid();
this.grid.Title = 'Cities';
this.Load();
}
private Load() {
var columns: Array<string> = new Array<string>('Name');
var vm = this;
this.citiesService.getMetadata(columns).then((data) => {
vm.grid.Columns = data;
vm.rowModel = this.citiesService.createGridData(data);
this.citiesService.getGridData(data).then((data) => {
vm.grid.Rows = data;
vm.toaster.success('Cities loaded successfully.');
return;
}, (error) => {
vm.toaster.error('Error loading cities', error.message);
});
}, (error) => {
vm.toaster.error('Error loading cities metadata', error.data.message);
});
}
public Save(item: models.Row) {
var vm = this;
var isNew: boolean = false;
if (item.Entity.Id == commons.Constants.GuidEmpty)
isNew = true;
this.citiesService.saveGridData(item).then((data: models.Row) => {
if (isNew)
vm.grid.Rows.push(data);
this.toaster.success("City saved successfully.");
}, (error: any) => {
this.toaster.error("Error saving city", error.data.message);
});
}
public Delete(item: models.Row) {
var vm = this;
this.citiesService.deleteGridData(item).then((data: any) => {
var index = vm.grid.Rows.indexOf(item);
vm.grid.Rows.splice(index, 1);
this.toaster.success("City deleted successfully.");
}, (error: any) => {
this.toaster.error("Error deleting city", error.data.message);
});
}
}
The final step is the view:
<grid list="vm.grid" row-model="vm.rowModel" order="Name" save="vm.Save(item)" delete="vm.Delete(item)"></grid>
You can find the source code here.
Mirko Maggioni 