从工厂触发 Angular $broadcast答案

【问题标题】：Triggering an Angular $broadcast from a factory从工厂触发 Angular $broadcast
【发布时间】：2016-03-07 08:26:31
【问题描述】：

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

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

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

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

带有树列表选择事件的工厂代码（参见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
 });

我正在尝试一些想法，因此不胜感激。

问候，鲍勃

【问题讨论】：

标签： angularjs

【解决方案1】：

工厂/服务没有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;
}

【讨论】：

天哪，我没有意识到我可以注入$rootScope。我以为我已经尝试过了。 :-(

【解决方案2】：

从中注入 $rootScope 和 $broadcast。

【讨论】：