This is a migrated thread and some comments may be shown as answers.

Trouble with ng-repeat with a DataSource

4 Answers 166 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Timothy
Top achievements
Rank 1
Timothy asked on 25 Sep 2014, 12:53 AM
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
            }
        }

    }])

4 Answers, 1 is accepted

Sort by
0
Mihai
Telerik team
answered on 25 Sep 2014, 09:09 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Timothy
Top achievements
Rank 1
answered on 25 Sep 2014, 04:25 PM
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 :








0
Mihai
Telerik team
answered on 29 Sep 2014, 08:14 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Timothy
Top achievements
Rank 1
answered on 29 Sep 2014, 05:24 PM
I have it working,

Thanks, for the support.
Tags
Integration with other JS libraries
Asked by
Timothy
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Timothy
Top achievements
Rank 1
Share this question
or