How to save style changes on malhar angular widgets?

Question

I have installed malhar-angular-dashboard module in my AngularJS application. I configured a layout with explicit saving. The problem is I can`t figure out how to save widget style changes. After I close my model settings window, I want to change and save the background of the contentStyle (background: red)

JavaScript

'use strict';

angular.module('widget-area')

.factory('widgetDefinitions', function() {
return [
  {
    name: 'widgetComments', // attr required
    title:' ',
    templateUrl: 'views/dashboards/widget-area/sarciniPrimiteComentarii.html',
    settingsModalOptions:{
      templateUrl: 'views/dashboards/widget-area/modalSettings/widgetCommentsModalTmpl.html',
      controller:'widgetCommentsCtrl'
    },
    onSettingsClose: function(resultFromModal, widgetModel, dashboardScope) {
      // do something to update widgetModel, like the default implementation:
      //jQuery.extend(true, widget, result);
      widgetModel.contentStyle = {
        background:'red'
      };
      // something here to save the state
    },
    size: {
      width: '100%',
      height: '250px'
    }
  },
  {
    name: 'widgetInfoSarciniPrimite', // attr required
    title:' ',
    templateUrl: 'views/dashboards/widget-area/infoSarciniPrimite.html'
  },
  {
    name: 'widgetInfoColaborare', // attr required
    title:' ',
    templateUrl: 'views/dashboards/widget-area/infoColaborariSarciniPrimite.html'
  },
  {
    name:'widgetTest',
    title:' titleTest ',
    template:'<div><h2>Widget {{widget.title}}</h2></div>'
  }
];
})
.factory('defaultWidgets', function() {
return [
  {name: 'widgetComments'}, //attr required
  {name: 'widgetInfoSarciniPrimite'},
  {name: 'widgetInfoColaborare'},
  {name: 'widgetTest'}
];
})
.controller('widgetCtrl',['$scope','$interval', '$window','$translate','widgetDefinitions','defaultWidgets',
function($scope,$interval,$window,$translate,widgetDefinitions,defaultWidgets){

  $scope.layoutOptions = { // layout with explicit save
    storageId: 'demo-layouts-explicit-save',
    storage: localStorage,
    storageHash: 'fs4df4d51',
    widgetDefinitions: widgetDefinitions,
    defaultWidgets: defaultWidgets,
    explicitSave: true,
    defaultLayouts: [
      { title: 'Layout 1', active: true , defaultWidgets: defaultWidgets },
      { title: 'Layout 2', active: false, defaultWidgets: defaultWidgets },
      { title: 'Layout 3', active: false, defaultWidgets: defaultWidgets }
    ]
  };
}]);

Answer 1

Have to override serialize(Function) from my Widget Definition Objects and include the attribute I want to serialize: contentStyle

This function will determine how the state of the widget gets saved

.factory('widgetDefinitions',function(){
   return [
     {
        {
          name: 'widgetInfoSarciniPrimite', // attr required
          title:' ',
          templateUrl: 'views/dashboards/widget-area/infoSarciniPrimite.html',
          serialize: function() {
             return _.pick(this, ['title', 'name', 'style', 'size', 'contentStyle', 'dataModelOptions', 'attrs', 'storageHash']);
          }
         }
     }
   ];
})