如何创建一个简单的仪表板角度小部件？答案

【问题标题】：How to create a simple dashboard angular widget?如何创建一个简单的仪表板角度小部件？
【发布时间】：2015-12-03 22:37:05
【问题描述】：

我为我的 Angular 应用程序安装了 malhar-angular-dashboard 模块，我想创建一个简单的小部件来显示一些虚拟文本。

HTML 视图

      <div class="row">
        <div class="col-md-12">
          <div dashboard="timeDashboardsOptions" class="dashboard-container"></div>
        </div>
      </div>

JavaScript

$scope.timeDashboardsOptions = {
    widgetDefinitions: [  // list required
      {
        name: 'timeWidget', // option required
        template: '<div>hello {{widget.title}}</div>',
        settingsModalOptions: {
          templateUrl: 'views/dashboards/widget-area/time.html'
        }
        ,
        onSettingsClose: function(resultFromModal, widgetModel, dashboardScope) {
          // do something to update widgetModel, like the default implementation:
          jQuery.extend(true, widget, result);
        },
        onSettingsDismiss: function(reasonForDismissal, dashboardScope) {
          // probably do nothing here, since the user pressed cancel
        }
      }
    ],
    defaultWidgets: [ // list required
      {name:'timeWidget'}
    ]
  };

小部件模板

<div>
  <h3>Time widget</h3>
</div>

当我运行它时，我得到了这样的结果：

ul li {
  list-style-type: none;
  display: inline;
}
.middle {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.last {
  background-color: #5bc0de;
  border-color: #46b8da;
}

<ul>
  <li class='first'>timeWidget - missing ???</li>
  <li>
    <button class='middle'>Default Widgets</button>
  </li>
  <li class='last'>
    <button class='last'>Clear</button>
  </li>
</ul>

还有错误

TypeError: _.merge 不是函数在 Object.WidgetModel (http://localhost:9000/bower_components/malhar-angular-dashboard/dist/malhar-angular-dashboard.js:848:42)

【问题讨论】：

看起来该模块依赖于下划线库。
Bower 也安装了下划线模块，我检查了一下，它就在那里，所以是的，我有 underscore.js ()
它是否包含在您的页面中，位于角度仪表板之前？
是的，我已经试过了:)

标签： angularjs angularjs-directive angular-module

【解决方案1】：

删除 underscore.js 并让 loadash.js 处理它。

【讨论】：