angularjs - Widgets with different dynamic content (angular-gridster) -

i trying create web dashboard based on angularjs angular-gridster module. gridster works fine , don't have problems binding content (like text or images ng-bind-html).

but in fact don't want add text or images these "widgets", i'm trying create dashboard dynamic content in it. so, user want add new widget dashboard , choose type (for example clock-widget or else) , maybe configure widget.

the problem don't know how add dynamic content (javascript, different html elements, ...) widget. widget created out of scope object, like:

$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 still beginner in angular excuse me if stupid question...

what solution add javascript , html elements? directives? own modules? how?

thank help!

in-order add dynamic content have create custom directives each widget, reference them inside standarditems object going ng-repeat on gridster grid.

scope.standarditems = [{    title: 'clock widget',    settings: {      sizex: 3,      sizey: 3,      minsizex: 3,      minsizey: 3,      template: '<clock-widget></clock-widget>',      widgetsettings: {        id: 1      }    }  }]

ok, should have directive gridster widget definitions has object custom widgets definitions , maybe default gridster options.

i recommend creating custom widgetbody directive of custom widgets reference. directive handle custom buttons attached each widget's header depending on how style widgets. need create associated template directive.

"use strict";  angular.module('mygridsterdashboard').directive('widgetbody', ['$compile',    function($compile) {      return {        templateurl: 'widgetbodytemplate.html',        link: function(scope, element, attrs) {          // create new angular element resource in          // inherited scope object can compile element           // item element represents custom widgets          var newel = angular.element(scope.item.template);          // using jquery after new element creation, append element          element.append(newel);          // returns function looking scope          // use angular compile service instanitate new widget element          $compile(newel)(scope);            }        }      }  ]);

after have created directive, need reference directive inside main template doing gridster ng-repeat custom widgets.

 <!-- reference default gridster options if created --> <div gridster="gridsteropts"> <ul>     <li gridster-item="item" ng-repeat="item in standarditems">         <!-- created custom directive compile widget body , keep out of dashboard object -->         <widget-body></widget-body>     </li> </ul>    

so inheritance each custom widget create inherit widget body , compiled , added dom one-by-one inside of ng-repeat directive.

hope helps.... - pluralsight course mark zamoyta entitled "building spa framework using angularjs