Question

我使用位于github上的Malhar AngularJS仪表板框架https://github.com/DataTorrent/malhar-angular-dashboard，以及一个简单的演示：http://datatorrent.github.io/malhar-angular-dashboard/#/。

他们的系统使用JQuery Sortable Widgets，它允许我将一些图表和网格加载到仪表板中。

我加载图表和网格的方法是在窗口小部件定义中使用他们的templateUrl属性，如下所示：

{ name: myWidgetEnum.TREELIST, title: 'Tree List', templateUrl: 'app/shared/gadget-templates/tree-list.html' }

这是一个更完整的Malhar Widget定义示例，我定义了我的UI＆＃34;小工具＆＃34;要在可排序的小部件中呈现：

＆＃13;

(function () {
'use strict';
angular.module('rage')    
.factory('widgetDefinitions', ['ColumnChartDataModel', 'TreeListDataModel', 'TreeMapDataModel', 'GridDataModel', widgetDefinitions])

var myWidgetEnum = Object.freeze({        
TREELIST: 'chart_treelist',
TREEMAP: 'chart_treemap',
HEATMAP: 'chart_heatmap',
GRID: 'chart_grid'
});

/* Define the widget definitions - base properties are defined in WidgetModel factory.
*/
function widgetDefinitions(ColumnChartDataModel, TreeListDataModel, TreeMapDataModel, GridDataModel) {

var size = { width: '20%', height: 90 };
var fixedSize = { width: '50%', height: 320 };  // keep height as a number, and add 'px' in directive
var initImagePath = 'images4/256x256/';

return [
    {                
	name: myWidgetEnum.TREELIST,
	title: 'Tree List',
	templateUrl: 'app/shared/gadget-templates/tree-list.html',                
	dataModelType: TreeListDataModel,
	dataModelOptions: {},               // this property will be persisted in DashboardState factory	
	gadgetType: 'table',
	chartType: 'treelist',
	settingsModalOptions: {	}                
    },    
    {
	name: myWidgetEnum.HEATMAP,
	title: 'Heat Map',
	templateUrl: 'app/shared/gadget-templates/grid.html',
	dataModelType: GridDataModel,
	dataModelOptions: {},               // this property will be persisted in DashboardState factory
	gadgetType: 'table',
	chartType: 'heatmap',
	settingsModalOptions: {} // see 'MainCtrl' controller
    }
];
}
  
})();

＆＃13;

主控制器中的仪表板选项：

＆＃13;

$scope.dashboardOptions = {
    widgetButtons: false,   // 'false' makes it a dropdown of options
    widgetDefinitions: widgetDefinitions,   // see dashboard-widget-factory.js
    defaultWidgets: defaultWidgets,
    storage: $window.localStorage,
    storageId: $scope.defaultDashboardId,       // 'rage.ui' - no longer hard code the storage Id - 06/11/2015 BM:
    hideWidgetSettings: false,
    settingsModalOptions: {   
	templateUrl: 'app/shared/include/gadget-config-new/gadget-config-container.html',
	controller: 'GadgetSettingsCtrl_NEW as settings',
	backdrop: true
    },
    onSettingsClose: function (result, widget) {
	jQuery.extend(true, widget, result);
	widget.dataModelOptions = result.dataModelOptions;
    },
    onSettingsDismiss: function (reason) { 
       console.log('widget settings were dismissed. Reason: ', reason);
    }
};

＆＃13;

当Malhar首次加载小部件时，它{J}可排序小部件中的compiles templateUrl。

但是，如果我启动小部件设置模式并选择一个不同的小部件＆＃34;从小工具定义列表中，当我尝试recompile新的templateUrl时，我遇到了问题。

换句话说，如果加载的第一个小部件是TREELIST，那么在它的模态设置中我选择一个名为HEATMAP的新小部件，我需要以某种方式强制重新编译由Malhar加载的新html模板。

在github上，您可以找到主要指令malhar-angular-dashboard.js https://github.com/DataTorrent/malhar-angular-dashboard/blob/master/dist/malhar-angular-dashboard.js，如果您搜索'DashboardWidgetCtrl'控制器，则会找到$scope.makeTemplateString函数以及$scope.compileTemplate函数的下方。

我正在尝试使用$ modal实例的resolve部分，如下所示，但这似乎更像是一个黑客而不是优雅的解决方案：

请参阅angular.element部分下方的try...catch：

＆＃13;

// Set resolve and reject callbacks for the result promise
modalInstance.result.then(
function (result) {

// Call the close callback
onClose(result, widget, scope);

// CHECK IF FIRST TIME CONFIGURING THE GADGET - 04/22/2015 BM:
if (!widget.gadgetConfigured) {
    widget.gadgetConfigured = true;                            
    widget.setHeight(widget.fixedSize.height); 
    widget.setWidth(widget.fixedSize.width);                            
}                        
scope.$broadcast('widgetSettingsClosed', widget, result);                                              

//AW Persist title change from options editor         
scope.$emit('widgetChanged', widget);

// hack to recompile the widget if user has swapped gadget types in gadget config modal - 10/01/2015 BM:
if (widget.chartType == "heatmap" || widget.chartType == "treelist") {
    try {
	angular.element(document.getElementById('dash')).scope().$$childHead.compileTemplate();
    } catch (e) {
	console.log("In modalInstance.result.then, cannot compile template " + e);
    }
}
},
function (reason) {
// Call the dismiss callback
onDismiss(reason, scope);
}
);

＆＃13;

如果有任何人在Mahlar Dashboard或编制指令方面有经验，我将不胜感激该领域的任何指导。

谢谢，

鲍勃

如何在Malhar AngularJS仪表板框架中重新编译小部件的templateUrl

0 个答案: