Question

我想使用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中定义了。我是缺少图书馆还是我做错了什么？

Answer 1

您不会缺少任何库，只是您必须拥有一个工厂，用于为 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...');
      }

   });

由于提供者未知，使用angular-dashboard时发生错误：widgetDefinitionsProvider

1 个答案: