Trouble with ng-repeat with a DataSource

[Timothy]

I have an Angular App that uses Kendo some Kendo components and I'm having trouble with ng-repeat on a kendo dataSource object. These objects from the DataSource get injected into a Directive that uses the objects for rendering. Basically, the first added object added fine and then subsequent objects are entering the datasource but are not triggering the creation of more rows--- _until_ I interact with the _first_ object ie clicking it.  Please help me to figure how to fix this problem.

Here is the ng-repeat:

    <plate-builder ng-repeat="plate in plates.view()"  plate="plate" modals="modals" plates="plates">        </plate-builder>

here is the directive code:

    angular.module('plateApp.directives',['plateApp.services', 'plateApp.controllers'])
    .directive('plateBuilder', [ 'createPlateService', function(){
        return{
            restrict : "AE",
            scope : {
                plate : "=plate",
                plates : "=plates",
                modals : "=modals"
            },
            templateUrl : "/ng/plate/partials/platePartial.html",
            controller : 'PlateBuilder.plateCtl'
        }
    }])


I am adding objects to the datasource like this:



            $scope.plates = new kendo.data.DataSource({

                data : []

            });

            $scope.addNewPlate = function(){
                $scope.plates.add(createPlateService.newPlate());
            }


Here is the thing I am adding:


    angular.module('plateApp.services',[])
    .factory('createPlateService',['$http' ,'$log','$q',
    function( $http, $log, $q){

        var columns = ["1","2","3","4","5","6","7","8","9","10","11","12"];
        var rows = ['A','B','C','D','E','F','G','H'];
        var plate = {};
        plate.grid = [];
        plate.grid [0] = []
        plate.grid [0][0] = { 'name' : '' , 'active' : false } ;
        for( var i = 0 ; i < columns.length ; i += 1){
            plate.grid[0][i+1] = {};
            plate.grid[0][i+1].type = "col-label";
            plate.grid[0][i+1].name = columns[i];
            plate.grid[0][i+1].active = true ;
        }
        for ( var i = 0 ; i < rows.length ; i += 1 ){
            plate.grid[i+1] = [];
            plate.grid[i+1][0] = {};
            plate.grid[i+1][0].type = "row-label";
            plate.grid[i+1][0].name = rows[i];
            plate.grid[i+1][0].active = true;
        }
        for (var i = 0 ; i < rows.length ; i += 1){
            for ( var j = 0 ; j < columns.length ; j += 1){
                plate.grid[i+1][j+1] = {};
                plate.grid[i+1][j+1].name = "empty";
                plate.grid[i+1][j+1].row = rows[i];
                plate.grid[i+1][j+1].col = columns[j];
                plate.grid[i+1][j+1].db_table = null;
                plate.grid[i+1][j+1].id = null;
                plate.grid[i+1][j+1].active = true;
            }
        }

        plate.getCell = function( row , col ){
            return plate.grid[row+1][col+1];
        }



        return {
            newPlate : function(){
                var rPlate = angular.copy(plate);
                rPlate.created = new Date();
                rPlate.sisUser = $('#sis-user').val();
                rPlate.status = 'unsaved';
                return rPlate
            }
        }

    }])

[Mihai]

Hello,

Most probably you are calling addNewPlate outside a $scope digest cycle.  Here is a sample to illustrate the difference: http://dojo.telerik.com/@mishoo/uhikI

The first button uses ng-click, which Angular ensure will run in a digest cycle.  The second uses plain onclick.  When you click the first, you see the item immediately.  When you click the second, items are added but you won't see them until a digest cycle (i.e. when you click the first button again).

Try adding $scope.$digest() at the end of your addNewPlate function.

Regards,
Mihai
Telerik

 

 

[Timothy]

Thanks for the quick reply, and the example is exactly what I have been experiencing. There is only one problem : I Am using ng-click for my click handler:

<button class="btn btn-primary" ng-click="addNewPlate()" >New Plate</button>

now I tried the $scope.$digest()  as you recommended and I am getting the 

Error: [$rootScope:inprog] $apply already in progress



So to test this further...

Ok somehow my directive template was causing the same symptoms as the example you posted... After monkeying around, it works as expected.  May have been an unclose div or something.

Very strange -- glad its now working .


Here is the html template that the plateBuilder directive is using :

[Mihai]

Hello,

ng-click will ensure that the expression is evaluated in a digest cycle, so indeed in that case you don't need to call $scope.$digest manually.  But then it should work.

I'm not sure I understand -- do you need any more support on this, or is it working properly?

Regards,
Mihai
Telerik

 

 

[Timothy]

I have it working,

Thanks, for the support.