Angular - 我可以广播来自 Angular 应用程序外部的消息吗？答案

【问题标题】：Angular - can I $broadcast a message from outside an angular app?Angular - 我可以广播来自 Angular 应用程序外部的消息吗？
【发布时间】：2013-10-05 12:32:16
【问题描述】：

我有一个场景，我需要非角度代码（在本例中为 Facebook 和 Twitter JS sdk）来广播角度控制器可以监听的事件。为什么？初始页面加载后，我通过 AJAX 加载和修改页面中的内容。内容附有多个喜欢/推文按钮（如博客/聚合器的首页）。我想在 Facebook 的“赞”按钮或 Twitter 的“分享”按钮上发生点击时添加事件挂钩 - 页面中有一些，每当获取新内容时，每个都会发生变化（同样，通过 ajax )。

现在，SDK 以不同的方式处理这个问题：

推特

twttr.events.bind('click', function(event){
    // here I'd like to somehow
    // $rootScope.$broadcast("twitter:clicked", event.currentTarget)
});

脸书

FB.Event.subscribe("edge.create", function(resp) {
    // here I'd like to somehow
    // $rootScope.$broadcast("facebook:clicked", resp)
});

一些控制器

app.controller("SomeController", ['$scope', function($scope) {
    $scope.$on("facebook:clicked", function(event, resp) {
        // do something with resp
    });

    $scope.$on("twitter:clicked", function(event, target) {
        // do something target
    });
}])

我们的想法是绑定这些事件处理程序一次，然后在相关控制器中处理广播消息，即使每次获取新内容时都会重新创建这些控制器。

因此，基本上，我正在寻找一种方法来连接现有且已初始化的 Angular 应用程序的 $rootScope 和 $broadcast 消息，尽管它不是应用程序的一部分。希望这是有道理的。谢谢。

【问题讨论】：

标签： angularjs external broadcast rootscope

【解决方案1】：

您可以绑定到 Angular 代码中的其他应用程序（在最有可能创建链接的指令中）。这样您就可以访问$rootScope。

或者，如果您手动引导应用程序，您可以保留对注入器的引用并获取$rootScope：

var injector = angular.bootstrap(element, ["myAppModule", ...]);
var $rootScope = injector.get("$rootScope");

在任何情况下都不要忘记在外部事件之后致电$apply。

【讨论】：

【解决方案2】：

您可以将 FB 和 Twitter API 包装在指令中，这些指令可以生成必要的 html（使用模板）来创建任何 FB 或 Twitter 组件。

在指令链接函数中，您可以初始化 sdk 组件并绑定到它的事件，然后进行广播或发出，因为指令将获得声明它的父级范围。

否则，如果您想以角度访问元素的范围，请查看此 SO 帖子 Call Angular JS from legacy code

【讨论】：