Question

如何延迟在Angularjs中调用函数？我做了一个简单的表格，有两个文字框，上面写着名字和姓氏。包含一个提交按钮，用于连接名字和姓氏并显示全名。我希望无论何时单击此提交按钮，都必须在5秒钟后显示全名。我该如何实现这种延迟？

我的HTML代码如下：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
    <script src="myApp.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    First Name : <input type="text" ng-model="fname"/> <br>
    Last Name : <input type="text" ng-model="lname"/><br>
    <button ng-click="clk()" > SUBMIT </button><br>
    Full Name : {{fullName}}
</body>
</html>

我的控制器看起来像是：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){
  $scope.fname="";
  $scope.lname="";
  $scope.fullName="";

  $scope.clk = function(){
    $scope.fullName = $scope.fname + " " + $scope.lname ;
  };

});

Answer 1

使用$timeout延迟函数内部的代码执行。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout){
  $scope.fname="";
  $scope.lname="";
  $scope.fullName="";

  $scope.clk = function(){
    $timeout(function(){
      $scope.fullName = $scope.fname + " " + $scope.lname ;
    },5000)
  };

});

Answer 2

我使用过angularJs的$timeout。

$scope.clk = function(){
      $timeout(function(){
       $scope.fullName = $scope.fname + " " + $scope.lname ;
      },5000);
  };

这是fiddle。

使用Angularjs延迟文本打印

2 个答案: