javascript - 使用服务更新 2 个 Controller 之间的共享数据

Question

我有 2 个 Controller ，我想在它们之间共享数据。一个 Controller 支持一个带有表的 View ，该表经常更改它的“选定项目”，另一个 Controller 使用所述项目信息从 API 获取数据。由于这两个 Controller 支持 View 并且位于同一页面上，因此它们没有经典的父/子层次结构，而是更多的“ sibling ”。

目前，我正在使用一个简单的“事件总线”服务，该服务使用 $emit 在根作用域上调用一个事件，我将其注入(inject)到两个 Controller 中，其中一个使用 监听变化>$rootScope.$on。现在我多次听说这是一个糟糕的解决方案，我应该使用服务来共享数据，但没有人真正解释如何观察数据的变化当也是

• 使用 $watch 不好
• $broadcast 不好

(关于应该避免哪种解决方案的 SO 似乎真的存在 war )。

我目前的解决方案:

Controller 1

export class Controller1 {
    private eventBus : Components.IEventBusService;

    constructor(eventBus: Components.IEventBusService) {
        this.eventBus = eventBus;
    }

    void itemSelected(item : IItemModel) {
        this.eventBus.emit("itemSelected", { "item" : item });
    }
}

Controller 2

export class Controller2 {

    constructor($scope : ng.IScope,
        eventBus : Components.IEventBusService) {

        eventBus.on("itemSelected", (event, data) =>
            this.onItemSelected(data), $scope);
    }

    private onItemSelected(data: any) {
        // do something with data.item!
    }
}

事件总线服务

export interface IEventBusService {
    on(event, callback, scope): void;
    emit(event, data): void;
}

class EventBusService implements IEventBusService {

    private rootScope: ng.IRootScopeService;

    constructor($rootScope: ng.IRootScopeService) {
        this.rootScope = $rootScope;
    }

    on(event, callback, scope) : void {
        var unbind = this.rootScope.$on(event, callback);
        if(scope) {
            scope.$on("$destroy", unbind);
        }
    }

    emit(event, data) : void {
        data = data || {};
        this.rootScope.$emit(event, data);
    }

}

使用这个解决方案有什么主要缺点吗？ “服务方式”在更新数据等方面是否更好？

Answer 1

你是对的，应该避免使用 $on 和 $emit，因为它们会产生不必要的噪音。对于这种情况实际上有一个非常简单的解决方案，我经常使用它。

您需要在您的服务中拥有一个对象，并为一个 Controller 提供对它的引用，而另一个需要触发操作的 Controller 可以监视服务变量(顺便说一句，在 TypeScript 上做得很好):

class ItemSelectionWrapper { //just a wrapper, you could have other variables in here if you want
    itemSelected: IItemModel;
}

class EventBusService implements IEventBusService {

    private myObj: ItemSelectionWrapper;
    ...
}

然后在您的范围内有 itemSelected 的 Controller 中(假设 Controller 1)您引用相同的变量:

export class Controller1 {
    private eventBus : Components.IEventBusService;


    constructor(eventBus: Components.IEventBusService) {
        this.eventBus = eventBus;
        this.eventBus.myObj = this.eventBus.myObj || {};
        this.eventBus.myObj.itemSelected = $scope.itemSelected; 
    }
}

现在，由于在 Controller 2 中您将注入(inject)服务，您将观察服务的变量:

$scope.$watch(function(){
        return busService.myObj,itemSelected;
    }, function (newValue) {
        //do what you need
});