AngularJS $超時服務

Question

我必須有3-4秒可見的東西。我試圖用$超時來實現這一點。這是我到目前爲止：

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