angularjs - 由于未知提供程序而使用角度仪表板时出错:widgetDefinitionsProvider
问题描述
我想使用 malhar-angular-dashboard 将小部件添加到我的应用程序中。 https://github.com/dtpublic/malhar-angular-dashboard
我只是在尝试将小部件添加到我的 Web 应用程序的选项卡中。
这是视图:
<html>
<head>
<script src = "/portal_demo/lib/1_6_10/angular.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-animate.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-aria.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-messages.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-cookies.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-route.js"></script>
<script src = "/portal_demo/lib/1_1_9/angular-material.js"></script>
<script src = "/portal_demo/lib/2_5_0/ui-bootstrap-tpls-2.5.0.js"></script>
<script src = "mainController.js"></script>
<link rel = "stylesheet" href = "/portal_demo/lib/3_3_7/bootstrap.css">
<link rel = "stylesheet" href = "/portal_demo/lib/1_1_9/angular-material.css">
<link rel="stylesheet" href="/portal_demo/lib/dash/malhar-angular-dashboard.css">
<script src="/portal_demo/lib/dash/malhar-angular-dashboard.js"></script>
<script src="/portal_demo/lib/dash/sortable.js"></script>
</head>
<body ng-app = "classApp" ng-controller="mainController" >
<header style="position: relative;">
<h2 style="display: inline-block;">Portal</h2>
</header>
<md-content>
<!--- home page for default user --->
<md-tabs md-dynamic-height="" md-stretch-tabs="never" md-border-bottom="" style="background: #f5f5f5;">
<md-tab label="MY VIEW" >
<md-content>
<div dashboard="dashboardOptions"></div>
</md-content>
</md-tab>
<md-tab label="PROJECT 1">
<md-content class="md-padding">
</md-content>
</md-tab>
</md-tabs>
</md-content>
</body>
</html>
这是控制器:
var app = angular.module("classApp", ['ngMaterial','ngAnimate', 'ui.bootstrap','ngRoute', 'ui.dashboard']);
//Main Controller
app.controller("mainController", mainController);
function mainController($scope, $http, $window, $window, $location, widgetDefinitions, defaultWidgets) {
//run initMain function during initialization
initMain();
function initMain() {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'explicitSave',
explicitSave: true
};
}
};
但是,目前我收到此错误:
Error: [$injector:unpr] Unknown provider: widgetDefinitionsProvider <- widgetDefinitions <- mainController
我只是想定义一个默认小部件,将其添加到dashboardOptions,然后使用 . widgetDefinitions 应该已经在 malhar-angular-dashboard.js 中定义。我错过了图书馆还是我做错了什么。
解决方案
你不会错过任何库,只是你必须有一个工厂来返回你的小部件定义,对于example
.
.factory('widgetDefinitions', function (RandomDataModel, MyChartDataModel) {
return [
{
name: 'random',
directive: 'wt-scope-watch',
attrs: {
value: 'randomValue'
}
},
{
name: 'time',
directive: 'wt-time'
},
{
name: 'datamodel',
directive: 'wt-scope-watch',
dataAttrName: 'value',
dataModelType: RandomDataModel
},
{
name: 'resizable',
templateUrl: 'template/resizable.html',
attrs: {
class: 'demo-widget-resizable'
}
},
{
name: 'fluid',
directive: 'wt-fluid',
size: {
width: '50%',
height: '250px'
}
},
{
name: 'My Chart',
directive: 'wt-my-chart',
attrs: {
config: 'config',
toolbar: {
icons: [
'glyphicon glyphicon-tags',
'glyphicon glyphicon-film'
]
}
},
size: {
width: '50%',
height: '250px'
}
}
];
})
.value('defaultWidgets', [
{name: 'random'},
{name: 'time'},
{name: 'datamodel'},
{
name: 'random',
style: {
width: '50%'
}
},
{
name: 'time',
style: {
width: '50%'
}
},
{name: 'My Chart'}
])
.controller('DemoCtrl', function ($scope, $interval, $window, widgetDefinitions, defaultWidgets) {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'demo_simple'
};
$scope.randomValue = Math.random();
$scope.config = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Demo'
},
loading: false
};
$interval(function () {
$scope.randomValue = Math.random();
}, 5000);
$scope.doCallback = function () {
console.log('execute callback...');
}
});
推荐阅读
- perl - 使用 crontab 通过 perl 调用 Java 程序时不运行
- javascript - 是否可以向使用 ReactJS 制作的 Todo 应用程序添加编辑功能?
- java - 如何强制特定的测试类在单独的 jvm 中执行?
- haskell - 安装 zlib 时 ghc.exe 无法执行 ld.exe
- javascript - Javascript - 在一系列跨度之上添加一个新的 DIV
- python - Pynput:计算按键次数
- mongodb - MongoDB 坚持使用“索引构建:耗尽构建期间收到的写入”消息创建索引
- ruby-on-rails - 将 mongomapper 替换为 mongoid 并更新 mongo 驱动程序后无法正确读取集合
- mysql - “BACKUP”在此位置无效
- c++ - 尝试使用带有参数变量的函数时出现 C++ 内存冲突错误