Question

作为布局的一部分，我有一个横幅指令：

.directive('appBanner', [function () {
    return {
        restrict: 'E',
        replace: true,
        controller: function ($scope) {
            $scope.$on('BANNER_ID_UPDATED', function (e, data) {
                // code to fetch banner from db here
            });
        }
    };
}]);

现在，根据显示的页面或内容，横幅可能需要更改。我一直在尝试使用事件在我的banner指令和我的其他指令之间进行通信。它将触发以下事件：

$scope.$emit('BANNER_ID_UPDATED', id);

这并不总是有效。当我发出一些console.log次调用时，似乎事件有时会在被侦听之前触发。我该如何解决这个问题，或者如何确保两个不相关的指令之间的通信呢？

Answer 1

使用活动时存在很多潜在的陷阱。对于这种特殊情况，我建议使用一个服务（你可以将它与banner指令捆绑到banner子模块中）。

然后，您的指令可以注册侦听器以触发横幅更新。然后调用此服务的一些updateBannerData(data)，该服务将调用侦听器以触发横幅更改。这是我头脑中的一些代码（希望没有错误......）

.factory('bannerService', function() {
  var bannerService = {
    listener: null,
    onUpdate(listener) {
      bannerService.listener = listener;
    }
    updateBannerData: function(data) {
      if(listener) {
        listener(data);
      }
    }
  };
  return bannerService;
})
// inject bannerService here:
.directive('appBanner', [function (bannerService) {
  return {
    restrict: 'E',
    replace: true,
    controller: function ($scope) {
      bannerService.onUpdate(function (data) {
        // code to fetch banner from db here
      });
    }
  };
}]);

无关指令之间的沟通

1 个答案: