angularjs - 如何在具有隔离范围的指令中监听站点范围的事件

Question

我正在使用具有隔离范围的指令在 angularjs 中创建自定义图表小部件。这个想法是，每个小部件在收到有关如何创建自身的基本配置信息后应该能够独立存在。

小部件将通过监听“update.data”事件与应用程序的其他部分进行通信。当事件被触发时，小部件知道根据通过事件对象传递的可用的新配置信息来刷新其数据(调用服务器)。

创建的示例小部件如下

 ng.directive('metricOverview', ['Report', function(Report) {
        return {
            restrict: 'EA',
            //replace: true,
            scope: {
                title: '@',
                metrics: '=',
                report: '@'
            },
            templateUrl: 'scripts/widgets/metric-overview/metric-overview.html',
            controller: function($scope, $element)
            {
            },
            link: function(scope, element, attrs) {
                scope.$on("update.data", function()
                {
                    Report.overview({metric: scope.metric, report: scope.report})
                            .$promise.then(function(result) {
                                console.log(result);

                                $(document).trigger("chart.refresh", result);

                            });
                });

            }
        };
    }]);

我的问题是哪里最适合触发“update.data”事件。例如，当页面加载并且 DOM 准备就绪时，我希望触发此事件，并且所有加载的小部件应该能够监听该事件并自行更新。我无法在 rootScope 上触发事件，因为在指令的隔离范围内无法访问它。

做了一些研究，但我发现的大部分内容都依赖于全局/父范围的使用，由于指令的孤立性，这不符合我的目的

解决这个问题的最佳方法是什么？

Answer 1

您可以使用使用 rootscope 和 $emit 的 eventbus 服务来处理这种情况，这样事件就不会进入很多子作用域。您可以将此服务注入(inject)到指令中并添加事件监听器。

(function (angular) {
'use strict';

/**
 * @ngdoc service
 * @name coreModule.eventbus
 * @requires $rootScope
 *
 * @description
 * Provides a eventing mechanism when a user cna broadcast and subscribe to application wide events.
 */
angular.module('coreModule').factory('eventbus', [
    '$rootScope',
    function ($rootScope) {
        /**
         * @ngdoc function
         * @name subscribe
         * @methodOf coreModule.eventbus
         *
         * @description
         * Subscribes a callback to the given application wide event
         *
         * @param {String} eventName The name of the event to subscribe to.
         * @param {Function} callback A callback which is fire when the event is raised.
         * @return {Function} A function tht can be called to unsubscrive to the event.
         */
        var subscribe = function (eventName, callback) {
                return $rootScope.$on(eventName, callback);
            },

            /**
             * @ngdoc function
             * @name broadcast
             * @methodOf coreModule.eventbus
             *
             * @description
             * Broadcasts the given event and data.
             *
             * @param {String} eventName The name of the event to broadcast.
             * @param {object} data A data object that will be passed along with the event.
             */
            broadcast = function (eventName, data) {
                $rootScope.$emit(eventName, data);
            };

        return {
            subscribe: subscribe,
            broadcast: broadcast
        };
    }
]);
}(angular));