Angular 与 KendoUI mobile 一起使用答案

【问题标题】：Angular working with KendoUI mobileAngular 与 KendoUI mobile 一起使用
【发布时间】：2014-09-24 21:19:07
【问题描述】：

所以，我正在尝试让 angularjs 与 KendoUI 移动...混合移动应用程序一起使用。

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}} 并显示警报...未发生。

有什么想法吗？

【问题讨论】：

在你想渲染应用视图的地方添加 ng-view 并尝试
这并没有解决问题。在查看渲染源时，问题是“ng-controller”甚至没有出现。似乎“剑道的东西”正在消除“棱角的东西” - 冲突。

标签： angularjs kendo-ui kendo-mobile

【解决方案1】：

这里是 Kendo UI 开发人员，Kendo UI 移动应用程序和 AngularJS 目前不能很好地协同工作。好消息是，这是我们现在正在实际开展的工作——它将在我们即将于 11 月发布的 2014 年第三季度发布。

【讨论】：

【解决方案2】：

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

【讨论】：