angular js中如何在外部插件访问内部页面的scope

项目中需要在ckeditor toolbar上的插件中访问到页面内部的一些变量或者定义的接口，在网上查了下，找到了一种有效的方法，现作为笔记以ckeditor中的插件为例。

1、在外部插件例如ckeditor的plugin.js中添加如下代码

angular.$externalBroadcast = function (selector, event, message) {
    var scope = angular.element(selector).scope();
    scope.$apply(function () {
        scope.$broadcast(event, message);
    });
};

其中三个参数分别是你要访问的元素和$broadcast的两个参数。在外部插件中利用$apply监控scope中的变量等等，并且用$broadcast给内部页面发出触发信号（例如点击，滑动等等）。例如：

项目中在ckeditor toolbar中按钮(也就是插件)的点击事件中添加如下代码

angular.$externalBroadcast = function (selector, event, message) {
    var scope = angular.element(selector).scope();
    scope.$apply(function () {
        scope.$broadcast(event, message);
    });
};
angular.$externalBroadcast('#pageContainer', 'messagePreview', previewType);

我想访问的是整个页面的内容，所以第一个参数选中了整个页面最外层的元素，剩下两个参数是传的一些值。剩下要做的就是接受外部访问信号的代码：

2、在内部页面的控制器中添加接收信号的代码

$rootScope.$on('messagePreview', function(event,data) {
    // handle the external event.
});

此时在里面，就可以做自己想做的事了，并且也可以顺利的访问到页面的所有内容。项目中为了减少页面controller的代码量，我给ckeditor新建了一个controller，在这个controller里放了$on。

3、个人总结

　　这个方法的简单来说就是在外部给内部页面发出信号，内部页面接收到信号后做想做的事，其实要做的事还是在页面内部，并不是真正的把页面内部的变量拿到了外部使用。

4、原文链接（记得FQ哦）