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.isVisible=false; 
           $timeout(function () { $scope.isVisible= true; }, 3000); 
      });

你必须在html ng-show="isVisible">

中使用

Answer 2

应该是这样的：

$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 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>

AngularJS $超时服务

3 个答案: