如何用AngularJS显示一秒钟的消息？

我有代码来检查与服务器的连接。我的代码每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中建议我可以实现这个倒计时吗？

我不认为使用指令是必要的，你可以在控制器内部做一切。但是你实现了closeConnection和openConnection，你应该编辑这些添加’start’和’stop’$ interval的方法。

还要记住，$ interval需要最大数量的递归，在这种情况下，这是非常有用的。

https://docs.angularjs.org/api/ng/service/ $间隔

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

    //this is what you already have
    $interval(function () {
        us.isConnected().then(closeConnect,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>';

原文链接：https://www.f2er.com/angularjs/145010.html

如何用AngularJS显示一秒钟的消息？

猜你在找的Angularjs相关文章