This question is locked. New answers and comments are not allowed.
I am trying integrate kendo ui in my project.
I have error:
TypeError: undefined is not a function
at d (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:1142)
at o (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:1567)
at link (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:11776)
at nodeLinkFn (http://localhost:4429/scripts/angular/angular.js:6737:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6131:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6134:13)
at publicLinkFn (http://localhost:4429/scripts/angular/angular.js:6027:30)
at link (http://localhost:4429/scripts/angular-route/angular-route.js:915:7)
at nodeLinkFn (http://localhost:4429/scripts/angular/angular.js:6737:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6131:13) <div kendo-mobile-application="" ng-app="myApp">angular.js:10103 (anonymous function)
Some code from my files:
index.html
app.js
partial1.html
controllers.js
I think problem in kendo-mobile-application inside ng-view. How to resolve it?
I have error:
TypeError: undefined is not a function
at d (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:1142)
at o (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:1567)
at link (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:11776)
at nodeLinkFn (http://localhost:4429/scripts/angular/angular.js:6737:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6131:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6134:13)
at publicLinkFn (http://localhost:4429/scripts/angular/angular.js:6027:30)
at link (http://localhost:4429/scripts/angular-route/angular-route.js:915:7)
at nodeLinkFn (http://localhost:4429/scripts/angular/angular.js:6737:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6131:13) <div kendo-mobile-application="" ng-app="myApp">angular.js:10103 (anonymous function)
Some code from my files:
index.html
...<
body
>
<!-- Make sure all your bars are the first things in your <body> -->
<
header
class
=
"bar bar-nav"
>
<
button
class
=
"btn btn-link btn-nav pull-left"
>
<
a
class
=
""
href
=
"#"
><
span
class
=
"icon icon-left-nav"
></
span
>Back</
a
>
</
button
>
<
a
class
=
"tab-item"
href
=
"#/"
><
h1
class
=
"title"
>Title</
h1
></
a
>
</
header
>
<
div
class
=
"content"
ng-view ></
div
>
<!-- Cordova reference, this is added to your app when it's built. -->
<
script
src
=
"cordova.js"
></
script
>
<
script
src
=
"scripts/platformOverrides.js"
></
script
>
<
script
src
=
"scripts/angular/angular.js"
></
script
>
<
script
src
=
"scripts/angular-route/angular-route.js"
></
script
>
<
script
src
=
"scripts/angular-filter/dist/angular-filter.js"
></
script
>
<
script
src
=
"scripts/kendo/jquery.min.js"
></
script
>
<
script
src
=
"scripts/kendo/kendo.all.min.js"
></
script
>
<
script
src
=
"scripts/kendo/kendo.angular.min.js"
></
script
>
<
script
src
=
"scripts/index.js"
></
script
>
<
script
src
=
"scripts/app.js"
></
script
>
<
script
src
=
"scripts/services.js"
></
script
>
<
script
src
=
"scripts/controllers.js"
></
script
>
<
script
src
=
"scripts/filters.js"
></
script
>
<
script
src
=
"scripts/directives.js"
></
script
>
</
body
>
app.js
angular.module(
'myApp'
, [
'ngRoute'
,
'angular.filter'
,
'kendo.directives'
,
'myApp.filters'
,
'myApp.services'
,
'myApp.directives'
,
'myApp.controllers'
]).
config([
'$routeProvider'
,
function
($routeProvider) {
$routeProvider.when(
'/'
, { templateUrl:
'partials/main.html'
, controller:
'MainCtrl'
});
$routeProvider.when(
'/view1'
, { templateUrl:
'partials/partial1.html'
, controller:
'Ctrl1'
});
$routeProvider.otherwise({redirectTo:
'/'
});
}])
partial1.html
<div style=
"padding: 10px;"
>
<div kendo-mobile-application ng-app=
"myApp"
>
<kendo-mobile-view id=
"index"
ng-controller=
"Ctrl1"
>
<kendo-mobile-list-view id=
"featured"
class=
"item-list"
k-data-source=
"sushiCart.productsDataSource"
>
<div k-template>{{dataItem.name}}</div>
</kendo-mobile-list-view>
</kendo-mobile-view>
</div>
</div>
controllers.js
angular.module(
'myApp.controllers'
, [
'kendo.directives'
])
.run([
'sushiCart'
,
function
(sushiCart) {
sushiCart.init();
}])
.service(
'sushiCart'
,
function
() {
var
menuJSON = [
{
"id"
: 1,
"name"
:
"Sashimi salad"
,
"price"
: 12.00,
"image"
:
"sashimi-salad.jpg"
,
"category"
:
"Cold starters"
,
"description"
:
"Organic greens topped with market fresh sashimi, wasabi soy vinaigrette."
,
"featured"
:
true
},
{
"id"
: 19,
"name"
:
"Yaki Udon"
,
"price"
: 11.50,
"image"
:
"yaki-udon.jpg"
,
"category"
:
"Hot Dishes"
,
"description"
:
"Udon noddles with chicken, king prawns and vegetables."
,
"featured"
:
true
}
];
this
.init =
function
() {
//the application DataSource
this
.productsDataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"/echo"
,
data: {
"json"
: JSON.stringify(menuJSON)
},
dataType:
"json"
}
}
});
//observable array that will be used to store products that user has selected
this
.added =
new
kendo.data.ObservableArray([]);
//field that will hold reference to the last selected product (used for displaying the details)
this
.currentItem =
null
;
};
})
.controller(
'Ctrl1'
, [
'$scope'
,
'sushiCart'
,
function
($scope, sushiCart) {
$scope.sushiCart = sushiCart;
}]);
I think problem in kendo-mobile-application inside ng-view. How to resolve it?