使用 AngularJS 在 KendoUI 中设置样式答案

【问题标题】：Style in KendoUI with AngularJS使用 AngularJS 在 KendoUI 中设置样式
【发布时间】：2014-06-08 12:14:10
【问题描述】：

使用 AngularJS 创建一个简单的 KendoUI 下拉列表。没有看到具有正确样式的下拉菜单。

这是 html...

<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>

js文件：

(function () {
   'use strict';
  angular.module('app')
  .controller('welcome3',
  [welcome3]);

function welcome3() {
  var vm = this;
  vm.activate = activate;

  activate();

  function activate() {
     vm.phoneOptions = {
        dataSource: {
            data: [
               {name: "iPhone"},
               {name: "Droid"},
               {name: "Windows"}
            ]
        },
        dataTextField: "name",
        dataValueField: "id",
        optionLabel: "Select a phone..."
     };

    }
}
})();

在 index.js 文件中，我有（除其他外）以下内容：

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">

<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
   // ...

<div ng-view></div>

<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>

下拉菜单如下所示：

与此相反：

谢谢！！

【问题讨论】：

标签： css angularjs kendo-ui

【解决方案1】：

通常当你有一个没有样式的控件时，这是因为你有一个错误的样式表链接。看起来common 文件链接正确，但请检查另一个。另外，在使用 Bootstrap 时，请确保使用 common-bootstrap CSS 文件。

http://trykendoui.telerik.com/@burkeholland/UXav

【讨论】：