angularjsangularjs-directiveangularjs-module

How to create a simple dashboard angular widget?


I installed malhar-angular-dashboard module for my angular application and I want to create a simple widget that displays some dummy text.

HTML view

      <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'}
    ]
  };

Widget template

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

When I run it, I get this kind of result:

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>

and the error

TypeError: _.merge is not a function at Object.WidgetModel (http://localhost:9000/bower_components/malhar-angular-dashboard/dist/malhar-angular-dashboard.js:848:42)


Solution

  • Remove underscore.js and let loadash.js handle it.