5

我有一个场景，我需要非角度代码（在本例中为 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)
});

Facebook

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
    });
}])

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

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

4

2 回答 2

10

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

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

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

无论如何不要忘记$apply在外部事件之后调用。

于 2013-10-05T12:56:27.573 回答
2

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

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

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

于 2013-10-05T13:07:42.637 回答