我正在尝试在 AngularJS 支持的 MVC5 学校元素中使用 jsTree。要在 Angular 应用程序中使用 jsTree，我正在使用 this directive .
据我观察，一切正常: - jstree 正确加载数据和结构，并触发所有事件 - jstree 加载 CSS 样式(如果我在 css 中更改例如边距，它会反射(reflect)到 jstree，如果删除 css 引用它呈现为普通 HTML UL)
但是看起来，布局的其余部分不起作用: - 没有背景变化，当我将光标移到节点上时 - 没有连接器，没有节点图像，没有箭头
从我能够发现的内容来看，css 似乎没有使用其中引用的图像:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
所以我尝试使用:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
带有图像的CSS放在同一个文件夹中:
但这也没有用。有任何想法吗？建议？
其余代码:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="@Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="@Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
@Styles.Render("~/Content/css")
@Styles.Render("~/jqueryUI")
@Styles.Render("~/uiLayout")
@Styles.Render("~/jstree")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryUI")
<script src="@Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
@RenderBody()
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>最佳答案
浏览器存储图像，Internet Explorer 缓存空图像并显示它们，而不是从服务器获取它们。
...请杀了我
关于css - jstree 没有从 css url 加载 MVC5 中的图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31705389/