Angular使用KendoUI mobile

时间:2014-09-24 21:19:07

标签: angularjs kendo-ui kendo-mobile

所以,我正试图让angularjs使用KendoUI mobile ...混合移动应用程序。

HTML:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />

<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>

<div data-role="layout" data-id="main">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
        </div>
    </div>

    <!-- application views will be rendered here -->

</div>

<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </div>
    <ul data-role="listview">
        <li>
            <a href="views/home.html">Home</a>
        </li>
        <li>
            <a href="views/settings.html">Settings</a>
        </li>
        <li>
            <a href="views/contacts.html">Contacts</a>
        </li>
    </ul>
</div>

AngularJS:

(function () {

var ngApp = angular.module("MyApp", ["kendo.directives"]);

ngApp.controller('HomeController', ['$scope', function ($scope) {
    $scope.foo = 'something';
    alert("HOME CONTROLLER");
}]);
}());

零件视图HTML:

<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>

我在想“应该”发生的是ng-controller =“HomeController”应该导致HomeController触发并填充$ scope.foo变量。这应该绑定到视图页面上的{{foo}},并显示警告......不会发生。“

有什么想法吗?

2 个答案:

答案 0 :(得分:3)

Kendo UI开发人员,Kendo UI移动应用程序和AngularJS目前无法很好地协同工作。好消息是,这是我们现在正在努力的事情 - 它将在即将于11月份发布的2014年Q3版本中发布。

答案 1 :(得分:1)

此处链接的Telerik资源应该有助于寻求将AngularJS功能最佳地集成到Kendo UI Mobile中的开发人员:http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial