Question

林＆＃39;在Malhar Angular Dashboard上工作，基于这个github项目https://github.com/DataTorrent/malhar-angular-dashboard。

根据上面链接帖子中的文档，在＆＃39; dataModelType＆＃39;向前走1/2：

`The best way to provide data to a widget is to specify a dataModelType in the Widget Definition Object (above). This function is used as a constructor whenever a new widget is instantiated on the page.`

在设置窗口小部件定义对象时，有多种选项可供选择：

templateUrl - URL of template to use for widget content

template - String template (ignored if templateUrl is present)

directive - HTML-injectable directive name (eg. "ng-show")

因此，当我添加自己的小部件定义column chart时，我尝试使用＆＃39;模板＆＃39;选项;但它没有注入{{value}}范围变量我设置。

使用原始datamodel示例窗口小部件def，使用＆＃39;指令＆＃39;选项。如果我在我的column chart定义上模仿这个方法，那么它可以工作！但它使用模板选项并不起作用。

这里的小部件定义＆＃39;工厂代码：

  (function () {
'use strict';
angular.module('rage')
    .factory('widgetDefinitions', ['RandomDataModel','GadgetDataModel',  widgetDefinitions])

function widgetDefinitions(RandomDataModel, GadgetDataModel) {
    return [          
      {
          name: 'datamodel',
          directive: 'wt-scope-watch',
          dataAttrName: 'value',
          dataModelType: RandomDataModel    // GOTTA FIGURE THIS OUT !! -BM:
      },
      {
          name: 'column chart',
          title: 'Column Chart',
          template: '<div>Chart Gadget Here {{value}}</div>',            
          dataAttrName: 'value',  
          size: {width: '40%',height: '200px'},
          dataModelType: ColumnChartDataModel
      },
    ];
}       
 })();

以下是工厂：

'use strict';

angular.module('rage')
  .factory('TreeGridDataModel', function (WidgetDataModel, gadgetInitService) {
      function TreeGridDataModel() {
      }

      TreeGridDataModel.prototype = Object.create(WidgetDataModel.prototype);
      TreeGridDataModel.prototype.constructor = WidgetDataModel;

      angular.extend(TreeGridDataModel.prototype, {
          init: function () {
              var dataModelOptions = this.dataModelOptions;
              this.limit = (dataModelOptions && dataModelOptions.limit) ? dataModelOptions.limit : 100;
              this.treeGridActive = true;
              //this.treeGridOptions = {};
              this.updateScope('THIS IS A TreeGridDataModel...');  // see WidgetDataModel factory           
          },

          updateLimit: function (limit) {
              this.dataModelOptions = this.dataModelOptions ? this.dataModelOptions : {};
              this.dataModelOptions.limit = limit;
              this.limit = limit;
          },

          destroy: function () {
              WidgetDataModel.prototype.destroy.call(this);             
          }
      });

      return TreeGridDataModel;
  });

'use strict';

angular.module('rage')
  .factory('ColumnChartDataModel', function (WidgetDataModel) {
      function ColumnChartDataModel() {
      }

      ColumnChartDataModel.prototype = Object.create(WidgetDataModel.prototype);
      ColumnChartDataModel.prototype.constructor = WidgetDataModel;

      angular.extend(ColumnChartDataModel.prototype, {
          init: function () {
              var dataModelOptions = this.dataModelOptions;
              this.limit = (dataModelOptions && dataModelOptions.limit) ? dataModelOptions.limit : 100;
              this.treeGridActive = true;
              var value = 'THIS IS A ColChartDataModel...';
              //$scope.value = value;
              this.updateScope(value);  // see WidgetDataModel factory           
          },

          updateLimit: function (limit) {
              this.dataModelOptions = this.dataModelOptions ? this.dataModelOptions : {};
              this.dataModelOptions.limit = limit;
              this.limit = limit;
          },

          destroy: function () {
              WidgetDataModel.prototype.destroy.call(this);
          }
      });

      return ColumnChartDataModel;
  });

最后是指令：

'use strict';

angular.module('rage')
  .directive('wtTime', function ($interval) {
    return {
      restrict: 'A',
      scope: true,
      replace: true,
      template: '<div>Time<div class="alert alert-success">{{time}}</div></div>',
      link: function (scope) {
        function update() {
          scope.time = new Date().toLocaleTimeString();
        }

        update();

        var promise = $interval(update, 500);

        scope.$on('$destroy', function () {
          $interval.cancel(promise);
        });
      }
    };
  })
  .directive('wtScopeWatch', function () {
    return {
      restrict: 'A',
      replace: true,
      template: '<div>Value<div class="alert alert-info">{{value}}</div></div>',
      scope: {
        value: '=value'
      }
    };
  })
  .directive('wtFluid', function () {
    return {
      restrict: 'A',
      replace: true,
      templateUrl: 'app/views/template2/fluid.html',
      scope: true,
      controller: function ($scope) {
        $scope.$on('widgetResized', function (event, size) {
          $scope.width = size.width || $scope.width;
          $scope.height = size.height || $scope.height;
        });
      }
    };
  });

我想知道为什么只有指令选项会更新wigdet的数据，而不是模板选项。

谢谢你，鲍勃

Answer 1

我相信我看到了问题。 dataAttrName设置和updateScope方法实际上正在执行除您期望之外的其他操作。

查看makeTemplateString函数here。这是最终构建您的小部件模板的内容。您应该注意到，如果您提供template，则dataAttrName甚至无法使用。

接下来，看看updateScope做了什么，并记住你可以在你自己的数据模型中覆盖这个功能来做你真正想要的事情，la：

angular.extend(TreeGridDataModel.prototype, {

  init: function() {...},
  destroy: function() {...},
  updateScope: function(data) {
    // I don't see this "main" object defined anywhere, I'm just going 
    // off your treegrid.html template, which has jqx-settings="main.treeGridOptions"
    this.widgetScope.main = { treeGridOptions: data };

     // Doing it without main, you could just do:
     // this.widgetScope.treeGridOptions = data;

     // And then update your treegrid.html file to be:
     // <div id="treeGrid" jqx-tree-grid jqx-settings="treeGridOptions"></div>
  }
});

将新数据模型添加到Malhar-Angular-Dashboard

1 个答案: