angular-dashboard-framework · sdorra · May 27, 2016 · May 26, 2016 · May 27, 2016 · May 27, 2016
diff --git a/src/scripts/provider.js b/src/scripts/provider.js
@@ -44,6 +44,7 @@ angular.module('adf.provider', [])
           <span class="sr-only">loading ...</span>\n\
         </div>\n\
       </div>';
+    var customWidgetTemplatePath = null;
 
     // default apply function of widget.edit.apply
     var defaultApplyFunction = function(){
@@ -209,6 +210,23 @@ angular.module('adf.provider', [])
       return this;
     };
 
+    /**
+     * @ngdoc method
+     * @name adf.dashboardProvider#customWidgetTemplatePath
+     * @propertyOf adf.dashboardProvider
+     * @description
+     *
+     * Changes the container template for the widgets
+     *
+     * @param {string} path to the custom widget template
+     *
+     * @returns {Object} self
+     */
+    this.customWidgetTemplatePath = function(templatePath) {
+      customWidgetTemplatePath = templatePath;
+      return this;
+    };
+
    /**
     * @ngdoc service
     * @name adf.dashboard
@@ -233,6 +251,7 @@ angular.module('adf.provider', [])
         structures: structures,
         messageTemplate: messageTemplate,
         loadingTemplate: loadingTemplate,
+        customWidgetTemplatePath: customWidgetTemplatePath,
 
         /**
          * @ngdoc method

diff --git a/src/scripts/widget.js b/src/scripts/widget.js
@@ -238,7 +238,7 @@ angular.module('adf')
       replace: true,
       restrict: 'EA',
       transclude: false,
-      templateUrl: adfTemplatePath + 'widget.html',
+      templateUrl: dashboard.customWidgetTemplatePath ? dashboard.customWidgetTemplatePath : adfTemplatePath + 'widget.html',
       scope: {
         definition: '=',
         col: '=column',

diff --git a/test/unit/providerSpec.js b/test/unit/providerSpec.js
@@ -105,4 +105,11 @@ describe('Dashboard Provider tests', function() {
     expect(dashboard.idEquals(1, 1)).toBe(true);
   }));
 
+  it('should set custom widget template url', function() {
+    var customWidgetTemplatePath = '/app/templates/customWidget.html';
+    provider.customWidgetTemplatePath(customWidgetTemplatePath);
+    var dashboard = provider.$get();
+    expect(dashboard.customWidgetTemplatePath).toBe(customWidgetTemplatePath);
+  });
+
 });
diff --git a/test/unit/widgetSpec.js b/test/unit/widgetSpec.js
@@ -32,7 +32,8 @@ describe('widget directive tests', function() {
       $uibModalInstance,
       $scope,
       directive,
-      dashboard;
+      dashboard,
+      $templateCache;
 
   // Load the myApp module, which contains the directive
   beforeEach(function(){
@@ -59,13 +60,14 @@ describe('widget directive tests', function() {
 
   // Store references to $rootScope and $compile
   // so they are available to all tests in this describe block
-  beforeEach(inject(function(_$compile_, _$rootScope_, _$uibModal_, _dashboard_){
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$uibModal_, _dashboard_, _$templateCache_){
       // The injector unwraps the underscores (_) from around the parameter names when matching
       $compile = _$compile_;
       $rootScope = _$rootScope_;
       $uibModal = _$uibModal_;
       dashboard = _dashboard_;
       dashboard.widgets = [];
+      $templateCache = _$templateCache_;
 
       $scope = $rootScope.$new();
       directive = '<adf-widget definition="definition" column="column" options="options" edit-mode="editMode" widget-state="widgetState" />';
@@ -114,6 +116,34 @@ describe('widget directive tests', function() {
     expect(counter).toBe(2);
   });
 
+  it('should load the default widget template', function(){
+    dashboard.widgets['test'] = {
+      template: '<div class="hello">Hello World</div>',
+    };
+    $scope.definition = {
+      type: 'test'
+    };
+
+    spyOn($templateCache, 'get').and.returnValue('<div></div>');
+    var element = compileTemplate(directive);
+    expect($templateCache.get).toHaveBeenCalledWith('../src/templates/widget.html');
+  });
+
+  it('should load a custom widget template', function(){
+    dashboard.widgets['test'] = {
+      template: '<div class="hello">Hello World</div>',
+    };
+    $scope.definition = {
+      type: 'test'
+    };
+
+    spyOn($templateCache, 'get').and.returnValue('<div></div>');
+    var customWidgetTemplatePath = null;
+    dashboard.customWidgetTemplatePath = '..src/templates/customWidget.html';
+    var element = compileTemplate(directive);
+    expect($templateCache.get).toHaveBeenCalledWith(dashboard.customWidgetTemplatePath);
+  });
+
   describe('delete functions', function(){
 
     beforeEach(function(){