使用Angular的带抽屉布局的Kendo移动应用程序

时间：2016-02-07 16:24:33

标签： kendo-mobile

我有以下html工作得很漂亮。抽屉按预期工作。

<html>
<head>

    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>

    <div data-role="view" id="drawer-content" data-layout="drawer-layout" data-title="Content" data-use-native-scrolling="true">
        Welcome to the Jungle
    </div>

    <div data-role="drawer" id="my-drawer" style="width: 20em" data-views="['drawer-content', 'views/inbox.html', 'views/starred.html', 'views/deleted.html', 'views/drafts.html', 'views/sentItems.html']" data-use-native-scrolling="true">
        <header data-role="header">
            <div data-role="navbar">
                <a data-align="left" data-role="button" class="nav-button" data-icon="contacts"></a>
                <span data-role="view-title">My Mail</span>
                <a data-align="right" data-role="button" class="nav-button" data-icon="settings"></a>
            </div>
        </header>
        <ul data-role="listview" class="km-listview-icons">
            <li data-icon="source-code"><a href="views/dashboard.html" data-transition="none">Dashboard </a></li>
            <li data-icon="downloads"><a href="views/inbox.html" data-transition="none">Inbox <span class="km-badge">6</span></a></li>
            <li data-icon="favorites"><a href="views/starred.html" data-transition="none">Starred Items <span class="km-badge">5</span></a></li>
            <li data-icon="edit"><a href="views/drafts.html" data-transition="none">Drafts <span class="km-badge">8</span></a></li>
            <li data-icon="reply"><a href="views/sentItems.html" data-transition="none">Sent Items</a></li>
            <li data-icon="trash"><a href="views/deleted.html" data-transition="none">Deleted Items</a></li>
        </ul>

        <ul data-role="listview" data-type="group" class="km-listview-icons">
            <li>
                Setup
                <ul>
                    <li data-icon="favorites">Penns</li>
                    <li data-icon="favorites">Animal Types</li>
                    <li data-icon="favorites">Feeding Types</li>
                    <li data-icon="favorites">Treatment Types</li>
                </ul>
            </li>
            <li>
                Account
                <ul>
                    <li data-icon="settings">Settings</li>
                    <li data-icon="action">Log Out</li>
                </ul>
            </li>
        </ul>
    </div>

    <div data-role="layout" data-id="drawer-layout">
        <header data-role="header">
            <div data-role="navbar">
                <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-icon" data-align="left"></a>
                <span data-role="view-title"></span>
                <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
                <a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
            </div>
        </header>
    </div>

    <script>
        var app = new kendo.mobile.Application(document.body, { skin: "nova" });
    </script>
</body>
</html>

我现在正尝试使用Kendo移动指令将其转换为Angular应用程序：

<html>
<head>
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application k-skin="nova" ng-app="cattleApp">

    <kendo-mobile-view id="drawer-content" k-layout="'drawer-layout'" k-title="Content" k-use-native-scrolling="true">
        Welcome to the Jungle
    </kendo-mobile-view>

    <kendo-mobile-drawer id="my-drawer" style="width: 20em" k-views="['drawer-content', 'views/inbox.html', 'views/starred.html', 'views/deleted.html', 'views/drafts.html', 'views/sentItems.html']" k-use-native-scrolling="true">
        <kendo-mobile-header>
            <div data-role="navbar">
                <a data-align="left" data-role="button" class="nav-button" data-icon="contacts"></a>
                <span data-role="view-title">My Mail</span>
                <a data-align="right" data-role="button" class="nav-button" data-icon="settings"></a>
            </div>
        </kendo-mobile-header>
        <ul data-role="listview" class="km-listview-icons">
            <li data-icon="source-code"><a href="views/dashboard.html" data-transition="none">Dashboard </a></li>
            <li data-icon="downloads"><a href="views/inbox.html" data-transition="none">Inbox <span class="km-badge">6</span></a></li>
            <li data-icon="favorites"><a href="views/starred.html" data-transition="none">Starred Items <span class="km-badge">5</span></a></li>
            <li data-icon="edit"><a href="views/drafts.html" data-transition="none">Drafts <span class="km-badge">8</span></a></li>
            <li data-icon="reply"><a href="views/sentItems.html" data-transition="none">Sent Items</a></li>
            <li data-icon="trash"><a href="views/deleted.html" data-transition="none">Deleted Items</a></li>
        </ul>

        <ul data-role="listview" data-type="group" class="km-listview-icons">
            <li>
                Setup
                <ul>
                    <li data-icon="favorites">Penns</li>
                    <li data-icon="favorites">Animal Types</li>
                    <li data-icon="favorites">Feeding Types</li>
                    <li data-icon="favorites">Treatment Types</li>
                </ul>
            </li>
            <li>
                Account
                <ul>
                    <li data-icon="settings">Settings</li>
                    <li data-icon="action">Log Out</li>
                </ul>
            </li>
        </ul>
    </kendo-mobile-drawer>

    <kendo-mobile-layout k-id="'drawer-layout'">
        <kendo-mobile-header>
            <kendo-mobile-nav-bar>
                <kendo-mobile-button k-rel="'drawer'" href="#my-drawer" k-icon="drawer-icon" k-align="left"></kendo-mobile-button>
                <kendo-view-title></kendo-view-title>
            </kendo-mobile-nav-bar>
        </kendo-mobile-header>
    </kendo-mobile-layout>



    <script>
        angular.module('cattleApp', ['kendo.directives']);

    </script>
</body>
</html>

我在运行时没有错误（在浏览器开发工具中），但它在我的浏览器中显示为空白页面，我不明白为什么。

请告知我遗失的内容？

1 个答案:

答案 0 :(得分：0)

我注意到你需要把＃34; http：＆＃34;在你的参考之前。当我用＆＃34; http：＆＃34;它工作得更好。

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />

<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

另外，我注意到以下引用无效：

<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

但是，当我从Telerik演示文档中插入reference时，它运行得更好：

<script src="http://kendo.cdn.telerik.com/2014.3.1029/js/kendo.all.min.js"></script>

在您的移动抽屉中使用＆＃34; kendo-mobile-list-view＆＃34;如：

<kendo-mobile-list-view class="km-listview-icons">
    <li data-icon="source-code"><a href="views/dashboard.html" data-transition="none">Dashboard </a></li>
    <li data-icon="downloads"><a href="views/inbox.html" data-transition="none">Inbox <span class="km-badge">6</span></a></li>
    <li data-icon="favorites"><a href="views/starred.html" data-transition="none">Starred Items <span class="km-badge">5</span></a></li>
    <li data-icon="edit"><a href="views/drafts.html" data-transition="none">Drafts <span class="km-badge">8</span></a></li>
    <li data-icon="reply"><a href="views/sentItems.html" data-transition="none">Sent Items</a></li>
    <li data-icon="trash"><a href="views/deleted.html" data-transition="none">Deleted Items</a></li>
</kendo-mobile-list-view>

而不是

<ul data-role="listview" class="km-listview-icons">
相关问题
最新问题