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

Question

我为我的角度应用程序安装了 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)

Answer 1

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