使用 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>

Bootstrap 进程

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 中的承诺。

在控制器中设置

我可以将调用的结果设置为控制器中的一个变量，将其设置为指令中的一个属性，然后将该属性绑定到它的控制器，但这也不起作用，即使我使用$watch 在变量上。

Answer 1

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

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

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

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

希望对您有所帮助！

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

Sharing data from asynchronous calls amongst directives in AngularJS with TypeScript

javascript

asynchronous

angularjs

typescript

angular-promise

控制器

指令

HTML

Bootstrap 进程

我尝试过的事情：

$rootScope

在控制器中设置