1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/**
* Copyright 2016 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License. You may obtain
* a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
(function() {
'use strict';
angular
.module('horizon.framework.widgets.table')
.directive('hzCell', hzCell);
hzCell.$inject = ['$compile'];
/**
* @ngdoc directive
* @name horizon.framework.widgets.table.directive:hzCell
* @param table {Object} - The table/controller context
* @param column {Object} - The column definition object, described below
* @param item {Object} - The object containing the property from column.id
* @description
* The `hzCell` directive allows you to customize your cell content.
* When specifying your table configuration object, you may pass in a
* template per each column.
*
* See the documentation on hz-field for details on how to specify formatting
* based on the column configuration.
*
* You should define a template when you want to format data or show more
* complex content (e.g conditionally show different icons or a link).
* You should reference the cell's 'item' attribute in the template if
* you need access to the cell's data. See example below.
*
* It should ideally be used within the context of the `hz-dynamic-table` directive.
* 'table' can be referenced in a template if you want to pass in an outside scope.
*
* @restrict E
*
* @scope
* @example
*
* var config = {
* selectAll: true,
* expand: true,
* columns: [
* {id: 'a', title: 'Header A', priority: 1},
* {id: 'b', title: 'Header B', priority: 2},
* {id: 'c', title: 'Header C', priority: 1, sortDefault: true},
* {id: 'd', title: 'Header D', priority: 2,
* template: '<span class="fa fa-bolt">{$ item.id $}</span>',
* filters: [someFilterFunction, 'uppercase']},
* {id: 'e', title: 'Header E', priority: 1,
* values: {
* 'a': 'apple',
* 'j': 'jacks'
* }
* }
* ]
* };
*
* ```
* <tbody ng-controller="TableCtrl as table">
* <tr ng-repeat="item in items track by $index">
* <td ng-repeat="column in config.columns"
* class="{$ column.classes $}">
* <hz-cell table="table" column="column" item="item"></hz-cell>
* </td>
* </tr>
* </tbody>
* ```
*
*/
function hzCell($compile) {
var directive = {
restrict: 'E',
scope: {
table: '=',
column: '=',
item: '='
},
link: link
};
return directive;
///////////////////
function link(scope, element) {
var column = scope.column;
var html;
if (column && column.template) {
// if template provided, render, and place into cell
html = $compile(column.template)(scope);
} else {
// NOTE: 'table' is not passed to hz-field as hz-field is intentionally
// not cognizant of a 'table' context as hz-cell is.
html = $compile('<hz-field config="column" item="item"></hz-field>')(scope);
}
element.append(html);
}
}
})();
|
