Hello all,
I am seriously banging my head for several days now with the following
problem:
I have created a directive that actually is just a crud table(Used
ng-table) having isolated scope and using its own controller. On my page i
have some tabs where on each tab i can have several crud table directives.
The problem i am having is that the table is not showing any result most of
the time. I have had some tests when the table was showing the data but
these tests are very rare(strange i know :-) ). I installed a firefox
extension to inspect my scope values and when i
look at my scope object that should bind to my table the data is actually
always in my scope object. I really hope someone can help me out or put me
in the right direction. Thanx in advance. I will post some code example
here :
*<!--using of the Directive Grid(childnode and selectedAssessed are
correctly filled) -->*
<div crud-grid id="grid_{{childnode.treeObjectId}}"
column-button-click='itemsCtrl.gridOnButtonClick'
ng-node="childnode"
ng-selected-assessed="vm.selectedAssessed">
</div>
*<!--Directive Grid -->*
(function () {
'use strict';
var app = angular.module('app');
app.directive('crudGrid', function () {
return {
// 'A' - only matches attribute name
// 'E' - only matches element name
// 'C' - only matches class name
restrict: 'A',
// scope = false, parent scope
// scope = true, get new scope
// scope = {..}, isolated scope
scope: {
columnButtonClick: "&", // method binding
ngNode: '=',
ngSelectedAssessed: '='
},
// view
templateUrl: '/app/directives/crud.grid/crud.grid.view.html',
// controller
controller: "crudgridController as vm",
link: function (scope, iElement, iAttrs, ctrl) {
scope.selectedNode = iAttrs.ngNode;
scope.selectedAssessed = iAttrs.ngSelectedAssessed;
}
};
});
})();
*<!--Directive Grid template-->*
<div class="table-responsive">
<table ng-table='vm.tableParamsMark' class="table table-striped
table-bordered table-condensed ng-table-rowselected table-hover crud-grid">
<tr ng-repeat='mark in vm.allItems'>
<td data-title="'MarkId'" data-ng-show="false"
sortable="'userName'">
{{mark.markId}}
</td>
<td data-title="'Score'" sortable="'score'">
{{mark.scoreId}}
</td>
<td data-title="'Omschrijving'" sortable="'description'">
{{mark.description}}
</td>
<td data-title="'Datum'" sortable="'date'">
{{mark.date}}
</td>
<td data-title="'Door'" sortable="'markingUserId'">
{{mark.markingUserId}}
</td>
<td class="text-center">
<i class="fa fa-pencil fa-2x" title="Wijzig score"
ng-click="" onmouseover="this.style.cursor='pointer'"></i>
<i class="fa fa-trash-o fa-2x" title="Verwijder score"
ng-click="" onmouseover="this.style.cursor='pointer'"></i>
</td>
</tr>
</table>
</div>
*<!--Directive Grid controller-->*
(function () {
'use strict';
// Controller name is handy for logging
var controllerId = 'crudgridController';
// Define the controller on the module.
// Inject the dependencies.
// Point to the controller definition function.
angular.module('app').controller(controllerId, ['$scope', '$element',
'$attrs', '$location', '$routeParams', 'common', 'config', 'datacontext',
'$filter', '$mdDialog', 'timeoutFactory', 'ngTableParams',
crudgridController])
function crudgridController($scope, $element, $attrs, $location,
$routeParams, common, config, datacontext, $filter, $mdDialog,
timeoutFactory, ngTableParams) {
'use strict';
var vm = this;
//// ---------------- PUBLIC -----------------
//// PUBLIC fields
vm.tableParamsMark = new ngTableParams({});
// All items
vm.allItems = [];
// The item being added
vm.newItem = {};
// The column used for ordering
vm.orderByColumn = '';
// Indicates if the ordering is reversed or not
vm.orderByReverse = false;
// Filter
vm.filter = "";
// Written filter text, this is not the applied one (performance
tunning)
vm.filterText = "";
//// PUBLIC Methods
// Creates the 'newItem' on the server
vm.createItem = _createItem;
// Gets an item from the server using the id
vm.readItem = _readItem;
// Updates an item
vm.updateItem = _updateItem;
// Deletes an item
vm.deleteItemWithConfirmation = _deleteItemWithConfirmation;
vm.deleteItem = _deleteItem;
// Get all items from the server
vm.getAllItems = _getAllItems;
// Set the order by column and order
vm.setOrderByColumn = _setOrderByColumn;
// Adds the item to the collection (no server communication)
vm.itemDeleted = _itemDeleted;
// Removes an item from the collection (no server communication)
vm.itemCreated = _itemCreated;
/* Logging functions */
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
//// ---------------- CODE TO RUN ------------
activate();
//// ---------------- PRIVATE ----------------
//// PRIVATE fields
//var _itemsService;
var _createItemThrottle = timeoutFactory.getTimeout(500);
var _updateItemThrottle = timeoutFactory.getTimeout(500);
var _filterThrottle = timeoutFactory.getTimeout(500);
//// PRIVATE Functions - Public Methods Implementation
function activate() {
common.activateController([_getAllItems($scope.ngNode,
$scope.ngSelectedAssessed)], controllerId)
.then(function () {
_setTableParamMark();
log('Retrieved Marks');
});
}
var _setTableParamMark = function () {
vm.tableParamsMark = new ngTableParams({
page: 1, // show first page
count: 15, // count per page
sorting: {
date: 'asc' // initial sorting
}
}, {
total: vm.allItems.length,
// set in default
getData: function ($defer, params) {
vm.allItems = params.sorting() ?
$filter('orderBy')(vm.allItems, params.orderBy()) :
vm.allItems;
}
});
}
function _createItem(item) {
if (_isValid(item)) {
datacontext.mark.add(mark).then(function () {
// Add at the first position
vm.allItems.unshift(createdItem);
});
}
};
function _readItem(itemId) {
return datacontext.mark.getById(itemId);
};
function _updateItem(item) {
if (_isValid(item)) {
// Only update if there are changes
if (_isDirty(item)) {
datacontext.mark.update(mark)
.then(function () {
_copyItem(response, item);
});
}
}
};
function _deleteItemWithConfirmation(item) {
bsDialog.deleteDialog('Mark')
.then(confirmDelete);
function confirmDelete() {
datacontext.mark.remove(row.MarkId)
.then(function () {
var index = vm.allItems.indexOf(item);
vm.allItems.splice(index, 1);
return true;
});
}
};
function _deleteItem(item) {
datacontext.mark.remove(row.MarkId)
.then(function () {
var index = vm.allItems.indexOf(item);
vm.allItems.splice(index, 1);
return true;
});
}
function _getAllItems(node,assessed) {
//vm.loading = true;
return datacontext.mark.getAll(node.treeObjectId,
assessed.assesUserId)
.then(function (data) {
vm.allItems = data;
vm.tableParamsMark.reload();
return data;
});
};
function _setOrderByColumn(column) {
if (vm.orderByColumn == column) {
// change order
vm.orderByReverse = !vm.orderByReverse;
} else {
// order using new column
vm.orderByColumn = column;
vm.orderByReverse = false;
}
_applyOrder();
}
function _itemDeleted(item) {
var index = vm.allItems.indexOf(item);
vm.allItems.splice(index, 1);
}
function _itemCreated(item) {
// add to the list of items
vm.allItems.unshift(item);
}
//// PRIVATE Functions
function _isValid(item) {
var isValid = true;
// validate all columns
vm.columnsDefinition.forEach(function (column) {
if (isValid) {
// required validation
if (column.required == 'true') {
isValid = item[column.binding] != undefined;
}
}
});
return isValid;
};
function _isDirty(item) {
var serverItem = angular.fromJson(item.serverValues);
var isDirty = false;
vm.columnsDefinition.forEach(function (column) {
if (!isDirty && // short circuit if item is dirty
(item[column.binding] != serverItem[column.binding])) {
isDirty = true;
}
});
return isDirty;
};
function _copyItem(itemSource, itemTarget) {
vm.columnsDefinition.forEach(function (column) {
itemTarget[column.binding] = itemSource[column.binding];
});
}
function _applyOrder() {
vm.allItems.sort(function (a, b) {
var comparisonResult = 0;
var aField = a[vm.orderByColumn];
var bField = b[vm.orderByColumn];
if (aField === null) aField = "";
if (bField === null) bField = "";
if (aField < bField) comparisonResult = -1;
if (aField > bField) comparisonResult = 1;
if (vm.orderByReverse) {
comparisonResult = comparisonResult * (-1);
}
return comparisonResult;
});
}
};
})();
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
