Question

我是AngularJS的新手。我正在考虑使用$timeout服务。我已经读过使用$timeout而不是JavaScript setTimeout函数的原因之一是因为$scope中的变量更改在用户界面中不会更新{{1} } 叫做。虽然这就是这个词，但我无法用实际代码来证实这一点。我写了以下内容：

的index.html

$scope.$apply

myController.js

<div ng-app="myApp">
  <div ng-controller="myController">
    <div>AngularJS Count: {{total1}}</div>
    <br />

    <div>setTimeout Count: {{total2}}</div>
    <br />

    <button ng-click="start()">start</button>
  </div>
</div>

在此代码示例中，var app = angular.module("myApp", []); function myController($scope, $timeout) { $scope.total1 = 0; $scope.total2 = 0; $scope.isStarted = false; $scope.toggle = function() { if (!$scope.isStarted) { $scope.isStarted = true; $timeout(ngUpdate, 1000); setTimeout(jsUpdate, 1000); } }; function ngUpdate() { $scope.total1 = $scope.total1 + 1; } function jsUpdate() { $scope.total2 = $scope.total2 + 1; } }上的变量更改将在UI中更新。我试图在代码中看到一个场景，其中通过$scope函数的更改在调用setTimeout之前不会更新UI。我误会了吗？或者是对AngularJS框架进行了更改，使原始断言过时。

Answer 1

由于您从setTimeout内部调用$scope.toggle，因此此代码已在$digest周期的上下文中执行。因此，无需致电$apply。

$timeout将测试它是否在$digest中，然后只在需要时调用$apply。在构建绑定到角度上下文之外发生的事件的指令时，这非常有用。

以下是需要$timeout时的指令方案：

app.directive('myDirective', function() {

    return {
        link: function(scope, element) {

            element.bind('click', function() {

                // $timeout is needed here because the 'click' event is outside angular
            }
        }
    }
});

AngularJS - 变更跟踪

1 个答案: