Question

我正在运行Dashboard系统，页面上的小部件将呈现一些网格和图表。我现在正在设置我们称之为“小部件链接”的内容，点击网格将转到图表小部件并显示与我刚刚点击的网格行相关的数据。

示例：“将树状列表（父窗口小部件）链接到条形图（子窗口小部件）”

在此示例中，我有Kendo treelist select个事件，它会将当前选定的行传递给我的widgetLinkingFactory因子。这个工厂应该遍历我页面上所有可用的小部件，看看是否有任何图表（子小部件）链接到这个treelist（父小部件）。

我想设置一个Angular观察者，然后在我的treelist $broadcast中触发select event。但是，我一直遇到这个问题，我无法将$scope注入服务或工厂。

带有treelist选择事件的工厂代码（请参阅dataModelOptions.change）：

'use strict';
angular.module('app')
.factory('TreeListDataModel', function (WidgetDataModel, widgetLinkingFactory) {

  function TreeListDataModel() {
  }

  TreeListDataModel.prototype = Object.create(WidgetDataModel.prototype);
  TreeListDataModel.prototype.constructor = WidgetDataModel;

  angular.extend(TreeListDataModel.prototype, {
    init: function () {

      // Kendo datasource object is initialized here...

      // KENDO TREELIST SELECT EVENT !!
      this.dataModelOptions.change = function (e) {
        var row = this.dataItem(this.select());

        var parentObj = _.find(this.dataItems(), { id: row.parentId });

        var dataModelOptions = {
          row: row,
          parentObj: parentObj,
          dimensions: this.options.dimensions, 
          fieldTypes: this.options.fieldTypes
        };

        // CANNOT DO THIS HERE - $SCOPE NOT AVAILABLE !!!
        $scope.$broadcast('refreshLinkedWidgets', dataModelOptions);

        widgetLinkingFactory.linkCharts(row, parentObj, this.options.dimensions, this.options.fieldTypes);
      },      
        this.updateScope(this.dataModelOptions);

    },
    updateScope: function (data) {
      this.dataModelOptions = data;
    },
    destroy: function () {
      WidgetDataModel.prototype.destroy.call(this);
    }
  });

  return TreeListDataModel;
});

在我的主要指令代码中，设置watcher：

没有问题

 scope.$on('refreshLinkedWidgets', function (event, dataModelOptions) {
     // call my widgetLinkingFactory update code
 });

我正在尝试一些想法，所以建议表示赞赏。

的问候，鲍勃

Answer 1

从中注入$ rootScope和$ broadcast。

Answer 2

工厂/服务没有scope。您无法在scope

上执行此操作

但您可以通过在服务中注入rooScope来实现。

喜欢这个

在名为TreeListDataModel

的refreshLinkedWidgets内声明方法

然后

$rootScope.$on("refreshLinkedWidgets", TreeListDataModel .refreshLinkedWidgets);

示例代码

angular.module('app')
.factory('TreeListDataModel', function (WidgetDataModel, widgetLinkingFactory,$rootScope) {

   var TreeListDataModel={
     refreshLinkedWidgets:refreshLinkedWidgets
   };
   function refreshLinkedWidgets(e,a){
      // some code
   }
   $rootScope.$on("refreshLinkedWidgets", TreeListDataModel .refreshLinkedWidgets);
    return TreeListDataModel;
}

从工厂触发Angular $广播

2 个答案: