update: when i just put dummy json data in my grid controller then
everything is showing correctly.
function _getAllItems(node,assessed) {
vm.allItems = 'json dummydata';
};
So it should have something to do with timing...
Op maandag 27 april 2015 12:32:12 UTC+2 schreef Gerry Veltjen:
>
> 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.
