app/modules/main/directives/body/mdtRowDirective.js
(function(){
'use strict';
/**
* @ngdoc directive
* @name mdtRow
* @restrict E
* @requires mdtTable
*
* @description
* Representing a row which should be placed inside `mdt-table` element directive.
*
* <i>Please note the following: This element has limited functionality. It cannot listen on data changes that happens outside of the
* component. E.g.: if you provide an ng-repeat to generate your data rows for the table, using this directive,
* it won't work well if this data will change. Since the way how transclusions work, it's (with my best
* knowledge) an impossible task to solve at the moment. If you intend to use dynamic data rows, it's still
* possible with using mdtRow attribute of mdtTable.</i>
*
* @param {string|integer=} tableRowId when set table will have a uniqe id. In case of deleting a row will give
* back this id.
*
* @example
* <pre>
* <mdt-table>
* <mdt-header-row>
* <mdt-column>Product name</mdt-column>
* <mdt-column>Price</mdt-column>
* </mdt-header-row>
*
* <mdt-row
* ng-repeat="product in products"
* table-row-id="{{product.id}}">
* <mdt-cell>{{product.name}}</mdt-cell>
* <mdt-cell>{{product.price}}</mdt-cell>
* </mdt-row>
* </mdt-table>
* </pre>
*/
function mdtRowDirective(){
return {
restrict: 'E',
transclude: true,
require: '^mdtTable',
scope: {
tableRowId: '='
},
controller: function($scope){
var vm = this;
vm.addToRowDataStorage = addToRowDataStorage;
$scope.rowDataStorage = [];
function addToRowDataStorage(value, attributes){
$scope.rowDataStorage.push({value: value, attributes: attributes});
}
},
link: function($scope, element, attrs, ctrl, transclude){
appendColumns();
ctrl.dataStorage.addRowData($scope.tableRowId, $scope.rowDataStorage);
function appendColumns(){
transclude(function (clone) {
element.append(clone);
});
}
}
};
}
angular
.module('mdDataTable')
.directive('mdtRow', mdtRowDirective);
}());