使用 TypeScript 在 AngularJS 中的指令之间共享来自异步调用的数据

Question

我可以找到解决这个问题的一些方法，但没有具体的方法让它起作用。

我有一个异步调用服务器以在 AngularJS 中获取数据并希望将其存储在一个变量中。然后，应用程序中的所有指令都需要可以访问该变量，但显然它们都需要等待变量被分配后才能使用它。我还使用 TypeScript 及其 export 功能从它们自己的函数中旋转指令。

控制器

export class MainController{
   fundData: Object;

   constructor(scope, FundService) {

       FundService.fetchData('some_param').then(d => {
           let data = d[0],
               fundProps = data.properties_pub;

           this.fundData = {
               'isin': data.clientCode,
               'nav': fundProps.nav.value,
               'nav_change': fundProps.nav_change.value.toFixed(2),
               'nav_change_direction': change,
               'total_aum': fundProps.net_asset.value.toFixed(2)
           };

           scope.ctrl = this;
       });  
   }
}

指令

class OverviewController {
    scope: ng.IScope;

    constructor(scope){

        scope.$watch('data', newVal => {
            console.log(newVal);
        });
    }
}

OverviewController.$inject = ['$scope'];

export function overview(): ng.IDirective {
    return {        
        restrict : "C",
        controller : OverviewController,
        controllerAs : "overview",
        template : require("../templates/overview"),
        bindToController :{
            data: '='
        }
    }
}

HTML

<div ng-controller="MainController">
    <div class="overview" data="ctrl.fundData"></div>
</div>

引导过程

let module = angular.module(MODULE_NAME,[])
                .controller('MainController', ['$scope','FundService', MainController])
                .service('FundService', FundService)
                .directive('overview', overview);

我尝试过的事情：

$rootScope

我可以设置一些静态的东西并分享它，所以这很有效：

$rootScope.data = 2;

这不是：

someFunction().then(data => { $rootScope.data = data });

也许我不理解 $rootScope 中的承诺。

在控制器中设置

我可以将调用结果设置为控制器中的变量，将其设置为指令中的属性，然后将属性绑定到其控制器，但这也不起作用，即使我使用@987654328 @ 变量。

Answer 1

我要做的是获取数据，将其存储在服务中（我认为您已经这样做了），然后在服务中的数据更新时广播一个事件。这是一个示例（在原始 javascript 中）

module.service('DataService', function(rootScope) {
    ...
    var data;
    services.setData = function(newData) {
        data = newData;
        rootScope.$broadcast('DataUpdated');
    };
    ...
});

然后在你的指令中你需要做的就是监听'DataUpdated'事件：

scope.$on('DataUpdated', ...);

希望有帮助！