JS góc - Cập nhật biến với khoảng thời gian

Question

Các mô hình góc có hoạt động với setIntervaL không?

Dưới đây là một ví dụ .. nếu tôi có

<p>{{number}}</p> 
<button ng-click="testFunc()">TEST</button> 

Đối với một số lý do nó cập nhật KHÔNG setInterval, nhưng như thế này nó không:

scope.testFunc = function(){ 
    setInterval(function(){ 
     scope.number--; 
    },1000); 
}; 

Without setInterval số sẽ cập nhật mỗi đơn bấm vào, nhưng với setInverval nó sẽ không cập nhật liên tục. Nếu tôi nhấp vào nó sau mỗi 5 giây, nó sẽ nhảy một loạt các con số lên (vì vậy nó đang chạy ở chế độ nền nhưng chế độ xem không cập nhật).

Answer 1

gì đang xảy ra là bạn đang sử dụng setInterval mà nằm ngoài "Thế giới góc của" vì vậy nó không cập nhật các DOM. Bạn có hai lựa chọn, một là tốt hơn rất nhiều so với khác.

Sử dụng $interval. Nó giống như setInterval ngoại trừ nó là một phần của thế giới Góc, vì vậy những thay đổi đó sẽ cập nhật chế độ xem của bạn (hãy chắc chắn chuyển $ interval vào chỉ thị của bạn).

scope.testFunc = function(){ 
    $interval(function(){ 
     scope.number--; 
    },1000); 
}; 

Tùy chọn thứ hai là gọi áp dụng() trên mã hiện tại của bạn để bắt đầu chu kỳ thông báo, không thực hiện điều đó mặc dù có tùy chọn tốt hơn.

Answer 2

Góc đi kèm với trình bao bọc đẹp cho setInterval. Sử dụng nó gần như cùng một cách.

https://docs.angularjs.org/api/ng/service/$interval

Answer 3

$ khoảng làm việc chắc chắn bạn có thể tìm hiểu thêm về nó tại địa chỉ: https://docs.angularjs.org/api/ng/service/ $ khoảng

như một lưu ý hơn nữa, thay vì sử dụng {{ number }} hãy thử sử dụng <p ng-model="number"></p> để hiển thị giá trị của mình để thay thế.

Answer 4

Cố gắng sử dụng khoảng $ nhưng nó trở Lỗi: $ khoảng không được định nghĩa .... NHƯNG $ tiêu hóa() làm việc:

scope.testFunc = function(){ 
    setInterval(function(){ 
     scope.number--; 
     scope.$digest(); 
    },1000); 
}; 

Answer 5

Xem tài liệu cho khoảng thời gian trong js góc Interval with Angular JS

Bạn không sử dụng $ digest để làm việc với khoảng thời gian. Xem mã bên dưới:

HTML

<div ng-app ng-controller="ApplicationController"> 
    <pre>Number: {{ number }}</pre> 
    <button ng-click="testTimer()">Test Timer</button> 
</div> 

JS

function ApplicationController($scope,$interval) { 

    $scope.number = 99999; 

    $scope.testTimer = function() { 
     $interval(function() { 
      $scope.number--; 
     }, 100); 
    }; 
} 

Xem ví dụ này trong action here