Làm thế nào để áp dụng chậm trễ trên AngularJS

Question

Tôi đang sử dụng bên dưới mã, Trong laravel lưỡi

<div ng-show="displayErrorMsg" class="form-group m-b alert alert-danger">{{errorMsg}} 

Trong angularjs khiển

$scope.errorMsg = "Data Empty"; 
$scope.displayErrorMsg = true; 
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000); 

nhắn không biến mất sau 2 giây tự động như được đưa ra.

Nhưng khi tôi chỉ cần đặt cảnh báo ("kiểm tra"); hoặc nhấp vào bất kỳ thư nào biến mất. Cách giải quyết vấn đề này?

Answer 1

Chỉ cần tiêm $timeout trong bộ điều khiển của bạn và sử dụng tính năng này.

$timeout(function() { $scope.displayErrorMsg = false;}, 2000); 

Ngoài ra bạn có thể sử dụng $ tiêu hóa hoặc $ áp dụng như sau

setTimeout(function() { 
    $scope.displayErrorMsg = false; 
    $scope.$digest(); 
}, 2000); 

setTimeout(function() { 
    $scope.$apply(function(){ 
     $scope.displayErrorMsg = false; 
    }); 
}, 2000); 

Kiểm tra ở đây như thế nào những tác phẩm này,

http://www.sitepoint.com/understanding-angulars-apply-digest/

Answer 2

cố gắng sử dụng thời gian chờ góc, để biết thêm https://docs.angularjs.org/api/ng/service/$timeout

hoặc How to change value after delay by using angularjs?

$timeout(function() { $scope.displayErrorMsg = false;}, 2000); 

Answer 3

Ví dụ 1: setTimeout

var timerCount = function() { 
    setTimeout(function() { 
     $scope.displayErrorMsg = false; 
     $scope.$apply(timerCount); 
    }, 2000); 
} 

Ví dụ 2: $ timeout

$timeout(function() { 
    $scope.displayErrorMsg = false; 
}, 2000); 

Answer 4

setTimeout là phương pháp của đối tượng cửa sổ. Vì vậy, để truy cập chức năng này, hãy tiêm $ window trong bộ điều khiển. Sau đó, bạn có thể gọi bất kỳ phương pháp như cảnh báo, xác nhận, setTimeout, setInterval, vv
Chi tiết https://docs.angularjs.org/api/ng/service/$window
Sau đó, Bạn có thể viết

$scope.errorMsg = "Data Empty"; 
$scope.displayErrorMsg = true; 
$window.setTimeout(function() { $scope.displayErrorMsg = false;}, 2000); 

Answer 5

Bạn có thể tiêm $ timeout. Phương thức window.setTimeout của Angular.

thử cái này: -

$timeout(function() { $scope.displayErrorMsg = false;}, 2000); 

cấu trúc của $ timeout là synatx: - $ timeout (fn, chậm trễ, invokeAny, vượt qua)

chức năng fn- mà bạn muốn trì hoãn

chậm trễ: - thời hạn thời gian

invokeAny: - nó sẽ thiết lập sai theo mặc định nếu không nó sẽ gọi hàm fn trong $ ap ply block

vượt qua: - đó là tham số tùy chọn để thực hiện chức năng.

Một cách tiếp cận: -

setTimeout(function() { 
    $scope.$apply(function(){ 
     $scope.displayErrorMsg = false; 
    }); 
}, 2000); 

phương pháp setTimeout chạy ra khỏi bối cảnh góc vì vậy chúng tôi cần phải gọi $ áp dụng mà sẽ gọi $ tiêu hóa chu kỳ bởi vì nếu chúng tôi cập nhật $ phạm vi bên trong setTimeout góc cần biết $ scope bị bẩn.

Answer 6

giải pháp cải thiện 1:

$scope.errorMsg = "Data Empty"; 
$scope.displayErrorMsg = true; 
if (timer) $timeout.cancel(timer); // restart counter 
timer = setTimeout(function() { $scope.displayErrorMsg = false;}, 2000); 

Giải pháp 1:

Bạn có thể sử dụng $timeout:

$scope.errorMsg = "Data Empty"; 
$scope.displayErrorMsg = true; 
setTimeout(function() { $scope.displayErrorMsg = false;}, 2000); 

Giải pháp 2:

Với setTimeout:

setTimeout(function() { 
    $scope.$apply(function(){ 
     $scope.displayErrorMsg = false; 
    }); 
}, 2000); 

Answer 7

Tôi thường cần một chức năng để chờ một chút vì bất kỳ lý do gì, cho mục đích thử nghiệm chỉ. Trong Java, chúng ta có thể sử dụng Thread.sleep(). Tuy nhiên, trong Javascript Tôi thích sử dụng một chức năng đơn giản tôi thấy here:

function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
    } 
    } 
} 

Nó đã làm việc cho tôi trong một vài tình huống, kể cả AngularJS. Nhưng, vui lòng, hãy nhớ rằng chức năng không nên được sử dụng trong môi trường sản xuất trừ khi bạn biết chính xác những gì bạn đang làm.