1

I have installed the malhar-angular-dashboard module for the purpose of using widgets. After I configure my options the dashboard-layouts directive works fine and is displaying my widgets in the view. If I change the options in my controller after the directive has compiled I get this error:

Widget fromTimeout is not found. undefined

HTML

 <div ng-controller="widgetCtrl">
  <div class="row">
    <div class="col-md-12" style="background:#B8B7C9;">
      <div ng-if="layoutOptions"
           dashboard-layouts="layoutOptions"
           class="dashboard-container"
           template-url="views/dashboards/widget-area/customDashboardLayout.tmpl.html">
      </div>
    </div>
  </div>

Chose widget - button 

 <div class="btn-group" ng-if="!options.widgetButtons">
        <span class="dropdown" on-toggle="toggled(open)">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="fa fa-bars"></span> Chose widget
          </button>
          <ul class="dropdown-menu" role="menu">
            <li ng-repeat="widget in layoutOptions.widgetDefinitions"> <!-- initial was : widget in widgetDefs -->
              <a href="#" ng-click="addWidgetInternal($event, widget);" class="dropdown-toggle"><span class="label label-primary">{{widget.name}}</span></a>
            </li>
          </ul>
        </span>
</div>

JavaScript Controller

// layout with explicit save
$scope.layoutOptions = { 
        storageId: 'demo-layouts-explicit-save',
        storage: localStorage,
        storageHash: 'fs4df4d51',
        widgetDefinitions: $scope.myWidgets, // to be changed
        layoutDefinitions:widgetDefs.REQUEST_ATTRIBUTES.layouts, // to be changed
        defaultWidgets: [], 
        explicitSave: true,
        defaultLayouts: [
          {title: 'Layout 1', active: true, defaultWidgets: []}
        ]
      };

 $scope.newChanges = function(){
     $scope.layoutOptions = { 
        storageId: 'demo-layouts-explicit-save',
        storage: localStorage,
        storageHash: 'fs4df4d51',
        widgetDefinitions:[{name:"fromTimeout"}], //changed
        layoutDefinitions:[],                     //changed
        defaultWidgets: [], 
        explicitSave: true,
        defaultLayouts: [
          {title: 'Layout 1', active: true, defaultWidgets: []}
        ]
      };
 };

Running the application

  1. First load (loading layoutOptions)

    works

  2. After calling newChanges() function

    enter image description here

Conclusion

When I trigger the click event from Chose widget the addWidgetInternal($event, widget) is executed witch is leading me to this problem in the dashboard-layout directive code:

 scope.widgetDefs = new WidgetDefCollection(scope.options.widgetDefinitions);
  scope.addWidget = function (widgetToInstantiate, doNotSave) {

      if (typeof widgetToInstantiate === 'string') {
        widgetToInstantiate = {
          name: widgetToInstantiate
        };
      }

      var defaultWidgetDefinition = scope.widgetDefs.getByName(widgetToInstantiate.name); // is undefined
      if (!defaultWidgetDefinition) {
        throw 'Widget ' + widgetToInstantiate.name + ' is not found.';
      }

      // Determine the title for the new widget
      var title;
      if (!widgetToInstantiate.title && !defaultWidgetDefinition.title) {
        widgetToInstantiate.title = 'Widget ' + count++;
      }

      // Instantiation
      var widget = new WidgetModel(defaultWidgetDefinition, widgetToInstantiate);

      // Add to the widgets array
      scope.widgets.push(widget);
      if (!doNotSave) {
        scope.saveDashboard();
      }

      return widget;
    };

I guess I need to recompile the directive in order to have access to my new changes I made from my controller. Any advice ?

4

1 回答 1

1

我没有使用layout-dashboard指令，但我使用了dashboardandwidget指令。关于 Kendo UI 库的使用，我也为此苦苦挣扎了一段时间，并发现了一个强制重新编译小部件的 hack。

当我在小部件指令代码中发现 scope.compileTemplate() 函数调用时，它就开始了。

在我的例子中，我搜索了剑道网格类 .k-grid，并在角度范围对象上找到了这个方法：$angular_scope.compileTemplate();

所以在我的刷新代码中，我首先在 DOM 中查找任何剑道网格（另一个 hack）：

   var grids = $(angular.element(document.getElementById('dash'))).find('.k-grid');

然后我使用 _.each() 来迭代 DOM 元素：

  _.each(grids, function (elem) {
         var grid = $(elem).parent().find('.k-grid').data('kendoGrid');  
         // add'l code omitted...
         if (grid) {                    
             grid.$angular_scope.compileTemplate();          // *** COMPILE TEMPLATE ***
          }
    });

它不是很优雅，但是当我动态换出小部件定义的 templateURL 属性时，它确实重新编译了我的 HTML 代码。

祝你好运，鲍勃

于 2016-01-06T16:24:34.097 回答