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

Question

我为我的 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 is not a function at Object.WidgetModel (http://localhost:9000/bower_components/malhar-angular-dashboard/dist/malhar-angular-dashboard.js:848:42)

Answer 1

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

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

How to create a simple dashboard angular widget?

angularjs

angularjs-directive

angular-module