javascript - 在 AngularJS 中使用 $broadcast 和 Service 将数据传递给指令

Question

我正在迁移到基于 Angular 的前端。我在 JavaScript 中有一个函数可以将一些数据传递给指令，经过一些研究发现使用 Service 和 $broadcast 可能是一个很好的解决方案。但对我不起作用...

这是我的代码:

var app = angular.module('app', []);
app.factory('broadcastService', ['$rootScope',
  function($rootScope) {
    var factory = {};
    factory.sendAjaxResut = function(name, obj) {
      console.log(' -- $broadcast ');
      $rootScope.$broadcast(name, obj);
    }
    return factory;
  }
]);

app.directive("bill", [directive]);
function directive() {
  return {
    restrict: "E",
    link: function($scope) {
      $scope.$on("b1", function(e, a) {
        console.log('-- directive')
      });
    }
  }
}

将数据传递到服务的代码:

function _ajaxCUSTOMER(e) {
  angular
    .injector(['ng' ,'app']) 
    .get("broadcastService")
    .sendAjaxResut("b1", e);
}

<button onclick="_ajaxCUSTOMER('foo')" >Send</button>

问题 1:.injector(['ng' ,'app']) 中的 ng 是什么

问题2:此时控制台只显示--$broadcast。我的代码无法捕获指令中的事件是什么问题

jsfiddle

Answer 1

您的指令未获取 $broadcast，因为您正在使用新的 $rootScope 创建新的注入(inject)器。相反，请使用应用程序的注入(inject)器。

function _ajaxCUSTOMER1(e) {
  var rawElem = document.getElementById("app");
  var elem = angular.element(rawElem);
  var _injector = elem.injector();
  var _broadcastService = _injector.get("broadcastService");
  _broadcastService.sendAjaxResut("b1",e);
}

此示例查找应用程序的元素并使用 angular.element 检索其注入(inject)器。

working JSFiddle .