javascript - angularjs 在真实情况下显示动画并在延迟后隐藏

Question

<div ng-show="IsError">ERROR !!</div>
<button ng-click="validate()">Validate</button>

function MainController($scope, ) {
    $scope.IsError = false;

    $scope.validate = function (val) {
        $scope.IsError = true;
        setTimeout(function () {
            $scope.IsError = false;
        }, 1500);
    }
}

在 validate() 上 div 显示但不隐藏。

1. 如何显示 div 在 1.5 秒后用 Angular (无 DOM 操作)隐藏？

2. 如何使用透明动画显示和隐藏？

Answer 1

您可以使用 $timeout service如下所示:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$timeout) {
  $scope.IsError = false;

    $scope.validate = function (val) {
        $scope.IsError = true;
        $timeout(function () {
            $scope.IsError = false;
        }, 1500);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-show="IsError">ERROR !!</div>
<button ng-click="validate()">Validate</button>
</div>