Question

我是棱角分明的新人。我正在阅读$scope.$apply();的功能我得到了一个样本，其中控制器的数据成员值是从计时器分配的，但更改没有反映在UI中，但是当我使用$scope.$apply();然后更改反映到UI .........为什么？

我在我的控制器中定义了计时器，所以如果我将任何数据分配给控制器的数据成员，那么应该进行更改。告诉我计时器有什么问题，如果我们将任何数据分配给控制器的数据成员，那么更改不会进入UI。

查看我的代码

<div ng-app="myApp" ng-controller="FirstCtrl">
{{message}}
<br>

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

var myApp = angular.module('myApp', []);

myApp.controller('FirstCtrl', function( $scope ){
$scope.message = "Waiting 2000ms for update";

    setTimeout(function () {
        $scope.message = "Timeout called!";
        // AngularJS unaware of update to $scope
        alert("alert called");
        $scope.$apply();
    }, 2000);

$scope.myFunc = function() {
        $scope.message = "Timeout called!";
    };

});

Answer 1

setTimeout是javascript函数。它导致摘要周期停止运行。这就是您需要使用$scope.$apply()手动启动摘要周期的原因。

或者，您可以使用$timeout服务代替setTimeout。 $timeout在构建服务中是有角度的，因此它不会对摘要周期造成任何问题

$timeout(function () {
        $scope.message = "Timeout called!";
        // AngularJS unaware of update to $scope
        alert("alert called");
        $scope.$apply();
    }, 2000);

确保将$timeout注入您的控制器

Answer 2

AngularJS为此提供了一个方便的包装：$timeout() - 它为我们$apply()打电话，所以我们不必这样做。魔术！

查看

<div ng-app="app" ng-controller="MainController as vm"> {{vm.message}} <br> <button ng-click="vm.myFunc()">OK</button> </div>

<强> CONTROLLER

angular .module('app', []) .controller('MainController', MainController) function MainController($timeout) { var vm = this; vm.myFunc = myFunc; vm.message = "Waiting 2000ms for update"; function myFunc() { vm.message = "Timeout called!"; } $timeout(myFunc, 2000); }

DEMO

Answer 3

使用角度的$timeout服务，而非原生javascript settimeout

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('FirstCtrl', function($scope, $timeout) {
  $scope.message = "Waiting 2000ms for update";
  $timeout(function() {
    $scope.message = "Timeout called!";
    // AngularJS unaware of update to $scope
    alert("alert called");
    //$scope.$apply();
  }, 2000);

  $scope.myFunc = function() {
    $scope.message = "Timeout called!";
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="FirstCtrl">
  {{message}}
  <br>

  <button ng-click="myFunc()">OK</button>
</div>

＆＃13;

Answer 4

在您的应用中使用 $ timeout 服务，其中包含自动 $ apply（）。这应该可以解决您的问题。

AngularJS：来自js计时器的init数据不起作用

查看我的代码

4 个答案: