CODEWITHSUNDEEP
javascripthtmlangularjskendo-ui
Coder
Coder

Reputation: 3130

AngularJS Kendo template not working

I have following code but the kendo list does not work. It prints list of [object Object].

(function () {
  'use strict';
  angular
    .module('prestart.core', [
      /*
        third-party modules
       */
      'ui.router'
    ]);
}());

(function () {
    'use strict';
    angular
        .module('prestart.home', []);
}());

(function () {
    'use strict';
    angular
        .module('prestart.services', []);
}());

(function () {
    'use strict';
    angular.module('prestart', [
        'prestart.core',
        'prestart.services',
        'prestart.home'

    ]);
}());

(function () {
    'use strict';
    angular
        .module('prestart')
        .config(function ($stateProvider, $urlRouterProvider, $compileProvider) {

            $compileProvider.debugInfoEnabled(false);
            $urlRouterProvider.otherwise('/');

            $stateProvider
                .state('home', {
                    url: '/home',
                    cache: false,
                    controller: 'PrestartCtrl as prestart',
                    templateUrl: 'www/src/home/prestart.html'
                })


        });
}());

(function () {
  'use strict';
  angular
    .module('prestart')
    .run(function($rootScope, $state){
        $state.go('home');
    });
}());

(function () {
    'use strict';
    angular
        .module('prestart.home')
        .controller('PrestartCtrl', PrestartCtrl);

    PrestartCtrl.$inject = ['$scope', 'dataLoaderService'];

    function PrestartCtrl($scope, $dataLoaderService) {
        var vm = this;
        vm.title = "Test title"
        vm.equipments = $dataLoaderService.loadPrestartData();
        return vm
    }
}());

(function () {
    'use strict';
    angular
        .module('prestart.services')
        .factory('dataLoaderService', dataLoaderService);


    function dataLoaderService() {

        return {
            loadPrestartData: loadPrestartData
        };

        // Implementation -----

        function loadPrestartData() {
            return [
                {
                    Description: 'Blah',
                    Category: 'Blah'     
                },
                {
                    Description: 'Blah 1',
                    Category: 'Blah 1'
                }
            ];
        }
    }
}());

index.html

<body ng-app="prestart">
  <div ui-view></div>
</body>

prestart.html

<kendo-mobile-list-view class="item-list" k-data-source="prestart.equipments">
   <div k-template>
       {{dataItem.Description}}
   </div>
</kendo-mobile-list-view>

Upvotes: 1

Views: 572

Answers (1)

Coder
Coder

Reputation: 3130

After banging my head many times I figured out that above code works when I import https://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js instead of http://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js

Still not sure why this is so! But works for now!

Upvotes: 2

Related Questions