Widgets with various dynamic content (angular-gridster)
I am trying to create an angularjs based web panel with an angular-gridster module. The retina works fine and I have no problem binding content to it (like text or images using ng-bind-html).
But I don't really want to add just text or images to these "widgets", I am trying to create a dashboard with dynamic content in it. So as a user, I want to add a new widget to the dashboard and select a type (like clock widget or whatever) and maybe customize the widget.
The problem is I don't know how to add dynamic content (javascript, different html elements, ...) to the widget. The widget is created from a scope object, for example:
$scope.standardItems = [
{ name: "Item 1", content: "Text 1", sizeX: 2, sizeY: 1, row: 0, col: 0 },
{ name: "Item 2", content: "Clock widget", sizeX: 2, sizeY: 2, row: 0, col: 2 }
];
I'm still new to angular, so excuse me if this is a stupid question ...
What could be a good solution for adding javascript and html elements? Directives? Custom modules? But how?
Thanks for your help!
source to share
To add dynamic content, you will need to create custom directives for each widget and then reference them inside your standardItems object, which you are going to ng-repeat on the grid grid.
scope.standardItems = [{
title: 'Clock Widget',
settings: {
sizeX: 3,
sizeY: 3,
minSizeX: 3,
minSizeY: 3,
template: '<clock-widget></clock-widget>',
widgetSettings: {
id: 1
}
}
}]
Ok, you should have a directive to define a gridster widget that has an object with your custom widget definitions and maybe some default grid settings.
I recommend creating a custom widgetBody directive that all your custom widgets will refer to. This directive will also handle custom buttons attached to each widget title, depending on the style of your widgets. You also need to create an appropriate template for the directive.
"use strict";
angular.module('myGridsterDashboard').directive('widgetBody', ['$compile',
function($compile) {
return {
templateUrl: 'widgetBodyTemplate.html',
link: function(scope, element, attrs) {
// create a new angular element from the resource in the
// inherited scope object so it can compile the element
// the item element represents the custom widgets
var newEl = angular.element(scope.item.template);
// using jQuery after new element creation, to append element
element.append(newEl);
// returns a function that is looking for scope
// use angular compile service to instanitate a new widget element
$compile(newEl)(scope);
}
}
}
]);
Once you have created your directive, you will need to reference that directive inside the main template, where you make your ng-repeat setter for your custom widgets.
<!-- reference your default gridster options if you created some -->
<div gridster="gridsterOpts">
<ul>
<li gridster-item="item" ng-repeat="item in standardItems">
<!-- created a custom directive to compile the widget body and keep it out of the dashboard object -->
<widget-body></widget-body>
</li>
</ul>
So now, by inheritance, every custom widget you create will inherit the body of the widget and will be compiled and added to the DOM one by one in your ng-repeat directive.
Hope this helps ... - Pluralsight course by Mark Zamoita entitled Building SPA Infrastructure with AngularJS
source to share