如何在构造函数脚本中5秒后更新范围值

时间:2016-09-16 06:19:45

标签: javascript angularjs typescript constructor

我遇到一个问题,我必须在5秒后刷新范围值。这是我的控制器构造函数,我在其中初始化值并调用超时函数以在5秒后刷新内容。

static $inject = ['$scope', 'selectedCardAccount', 'CardService', 'ecAnimationService', '$interval', '$modal','$rootScope','$timeout','PromiseTimeout','$q','$stateParams'];
            constructor(public $scope,public selectedCardAccount, public CardService:services.CardService, public $interval:ng.IIntervalService, public $modal,public $rootScope:ng.IRootScopeService, public $timeout,public PromiseTimeout,public $q,public TrackPendingRequest,public $stateParams) {

    //setting the current value
    this.account = selectedCardAccount.account;

    //calling a serive again after five section to referesh the content
    $timeout(function(){
            //delete the current object
        delete this.account;
        //calling service to get result
                CardService.getAccountAndCardByShortName($stateParams.productShortName,$stateParams.id).then((succRess)=>{

            //setting the value
            //Error : cannot read property of account
            this.account = succRess.account;
        });
    }, 5000);
}

错误:无法读取帐户属性

指令代码:

module ec.directives {
        export class easein{
            /**
             * A directive is not new:ed up so we don´t specify anything on this class
             * */
            constructor(){
                var directive: ng.IDirective = {};
                directive.link = (scope:IEaseInNumberScope, element, attrs, ctrl:controllers.EaseInNumberCtrl) => {
                    ctrl.animateRemainingValue(scope);
                };
                directive.restrict = "EA";
                directive.template = "{{current | number : 2}}";
                directive.controller = 'EaseInNumberCtrl';
                directive.scope = {
                    duration: "=?",
                    startValue: "=?",
                    endValue: "="
                };

                return directive;
            }
        }
}

HTML:

<div class="row">
    <div class="col-xs-6">
        <h2 class="heading-small-bold light mar-l-1"
            ng-bind="'used_amount' | i18n"></h2>

        <h1 class="heading-big-thin-medium mar-l-1">
            <easein end-value="vm.account.usedCredit"></easein>
        </h1>
    </div>
    <div class="col-xs-6 align-r">
        <h2 class="heading-small-bold light mar-r-1"
            ng-bind="'left_to_spend' | i18n"></h2>

        <h1 class="heading-big-thin-medium mar-r-1">
            <easein start-value="vm.account.creditLimit"
                    end-value="vm.account.openToBuy"></easein>
        </h1>
    </div>
    <div class="col-xs-12 mar-t-2">
        <progressbar class="progress-bar" value="vm.loadingValue"
                     max="vm.account.creditLimit"
                     type="warning"></progressbar>
        <div class="flexible-header">
            <h2 class="heading-small-bold light"
                ng-bind="'last_transactions' | i18n"></h2>
        </div>
    </div>
</div>

如果有人建议如何在构造函数中的5节之后刷新值,请帮助。

2 个答案:

答案 0 :(得分:0)

我相信你的方法有错误。

首先,您需要在Typescript中使用lambda(箭头函数),以便在$ timeout回调中正确设置构造函数的this上下文。

其次,没有理由使用delete关键字。使用新结果设置this.account的值,同时保持初始对象引用不变。

static $inject = ['$scope', 'selectedCardAccount', 'CardService', 'ecAnimationService', '$interval', '$modal','$rootScope','$timeout','PromiseTimeout','$q','$stateParams'];
constructor(public $scope,public selectedCardAccount, public CardService:services.CardService, public $interval:ng.IIntervalService, public $modal,public $rootScope:ng.IRootScopeService, public $timeout,public PromiseTimeout,public $q,public TrackPendingRequest,public $stateParams) {

    //setting the current value
    this.account = selectedCardAccount.account;

    //calling a serive again after five section to referesh the content
    $timeout(() => {

         CardService
             .getAccountAndCardByShortName($stateParams.productShortName,$stateParams.id)
             .then((succRess)=>{
                  angular.copy(succRess.account, this.account);
              });
    }, 5000);
}

答案 1 :(得分:0)

根据错误消息,帐户在succRess上不可用。

您应该尝试查看succRess是否是有效的JSON对象,如果服务从服务器返回数据,则需要使用JSON.parse将其反序列化为JSON对象。

此外,您可能需要考虑使用$ timeout,因此该属性的侦听器会感知值的更改。