我正在使用具有隔离范围的指令在 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 上触发事件,因为在指令的隔离范围内无法访问它。
做了一些研究,但我发现的大部分内容都依赖于全局/父范围的使用,由于指令的孤立性,这不符合我的目的
解决这个问题的最佳方法是什么?