angularjs - 如何使用AngularJS每秒显示一条消息？

Question

我有用于检查与服务器的连接的代码。我的代码每60秒运行一次。一旦代码运行，它将创建一条消息，并显示在页面上。这是我到目前为止的内容:

检查的代码:

$interval(function () {
        us.isConnected().then(closeConnect, openConnect);
    }, 60 * 1000);

执行检查的代码

isConnected = (): ng.IPromise<any> => {
    var self = this;
    var deferred = this.$q.defer();
    this.$http({
        method: 'GET',
        url: self.ac.baseUrl + '/api/Connect/Verify'
    })
        .success(() => {
            self.connects = 0;
            self.connectMessage = null;
            deferred.resolve();
        })
        .error(() => {  
            if (self.connects == 0) {
                self.connectMessage = "Unable to establish a connection to the server. " + retryMessage();
            } else if (self.connects == 1) {
                self.connectMessage = "Unable to establish a connection to the server for " + self.connects + " minute" + retryMessage();
            } else {
                self.connectMessage = "Unable to establish a connection to the server for " + self.connects + " minutes." + retryMessage();
            }
            self.connects++; 
            deferred.reject();
        });
    return deferred.promise;
};

我想要做的是拥有一个名为retryMessage()的简单函数，该函数将允许我给出如下消息:

 Unable to establish a connection to the server for 164 minutes. 
 Connection will be retried in 59 seconds.
 Unable to establish a connection to the server for 164 minutes. 
 Connection will be retried in 58 seconds.
 Unable to establish a connection to the server for 164 minutes. 
 Connection will be retried in 57 seconds.
 ...
 Unable to establish a connection to the server for 164 minutes. 
 Connection will be retried in 1 seconds.
 Unable to establish a connection to the server for 164 minutes. 
 Retrying connection now.
 Unable to establish a connection to the server for 165 minutes. 
 Connection will be retried in 59 seconds.

随着秒数倒计时到0，这时将进行重新检查。

谁能在AngularJS中建议一种可以实现这一倒计时的方法？

Answer 1

我认为没有必要使用指令，您可以在 Controller 内完成所有操作。但是，您已实现closeConnection和openConnection，则应编辑这些方法，并添加'start'和'stop'$interval。

还请记住，$interval进行的最大递归次数在这种情况下非常有用。

https://docs.angularjs.org/api/ng/service/ $ interval

function controllerFunc($scope, $interval) {
    var timer;
    var lastConnection = 0;
    $scope.message = '';

    //this is what you already have
    $interval(function () {
        us.isConnected().then(closeConnect, openConnect);
    }, 60 * 1000);
    //...

    function closeConnect() {
        //...
        $interval.cancel(timer);
        lastConnection = 0;
    }

    function openConnect() {
        //...
        timer = $interval(timerCall, 1000, 60);
        lastConnection++;
    }

    function timerCall(times) {
        $scope.message += 'Unable to establish a connection to the server for ' + lastConnection + ' minutes. ';

        var retry = 60 - times;
        $scope.message += 'Connection will be retried in '+ retry +' seconds';
    }
}

格式化消息
$scope.message在此示例中为纯字符串，因此您不会获得任何格式，但可以将其放在 ng-bind-html指令中，然后将任何html标记添加到消息字符串中。

https://docs.angularjs.org/api/ng/directive/ngBindHtml

<div ng-bind-html="message"></div>

所以改变js

$scope.message += '<p>Connection will be retried in '+ retry +' seconds</p>';