如何在 malhar 角度小部件上保存样式更改？答案

【问题标题】：How to save style changes on malhar angular widgets?如何在 malhar 角度小部件上保存样式更改？
【发布时间】：2016-03-12 02:53:19
【问题描述】：

我在我的 AngularJS 应用程序中安装了 malhar-angular-dashboard 模块。我配置了一个显式保存的布局。问题是我无法弄清楚如何保存小部件样式更改。关闭模型设置窗口后，我想更改并保存 contentStyle 的背景（背景：红色）

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

【问题讨论】：

标签： javascript angularjs angular-module

【解决方案1】：

必须从我的 Widget 定义对象 中覆盖 serialize(Function) 并包含我要序列化的属性：contentStyle

此函数将确定小部件的状态如何保存

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

【讨论】：