AngularJS $timeout服务

Question

我得有什么东西能看得到3-4秒。我正试图使用$timeout来实现这一目标。到目前为止，我得到的是：

$timeout(function() {
  debugger;
  $scope.$on(broadcastService.topErrorBar.show,
  function(event, message) {
    $scope.rootElement.addClass('is-visible');
    $scope.isVisible = true;
    $scope.message = message;
  });
}, 3000);

$timeout.cancel(function() {
    $scope.close();
});

$scope.close = function() {
  $scope.rootElement.removeClass('is-visible');
  $scope.isVisible = false;
};

这不管用，我也解决不了这个问题。我做错了什么？在这种情况下我是否应该使用超时。

Answer 1

应该是这样的：

$scope.$on(broadcastService.topErrorBar.show,
  function(event, message) {
    $scope.rootElement.addClass('is-visible');
    $scope.isVisible = true;
    $scope.message = message;
    $timeout(function() {
    $scope.close();
}, 3000);

$scope.close = function() {
  $scope.rootElement.removeClass('is-visible');
  $scope.isVisible = false;
};

在广播中，使元素可见，启动超时，以便在3秒后调用$scope.close。在您的情况下不需要$timeout.cancel。

Answer 2

那麽：

$scope.$on(broadcastService.topErrorBar.show,
      function(event, message) {
          $scope.isVisible=false; 
           $timeout(function () { $scope.isVisible= true; }, 3000); 
      });

您必须在html ng-show="isVisible">中使用

Answer 3

你的逻辑颠倒了。超时中的函数在时间过去后触发。您希望元素是可见的，然后在超时函数中将可见性设置为false。下面是一个例子。

​

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  This is always visible.
  <span ng-show="visible">This should hide after 3 seconds</span>
</div>

​