Question

我遇到了以下代码的问题。

我的html页面代码：

<body ng-app="myapp">

    <div ng-controller="myController">
    The message is {{message}}
        <input type="button" value="Change Message" ng-click="changeMessage()">

   </div>

我的控制器代码：

app.controller('myController',function($scope)
{              
 $scope.changeMessage=function()
    {
        setTimeout(function(){
        console.log("Message changed");
      $scope.message="Hurray !!! New Message";    

        },3000);

$scope.newMessage=function()
        {
            $scope.message="hello";
            console.log("new message");
        };

但是如果我使用changeMessage函数，即使console.log消息出现，我也无法看到更改的Message属性。这两种情况都缺少了什么。

提前致谢

Answer 1

在超时完成后你应该使用$ digest（）：

$scope.changeMessage=function()
{
   setTimeout(function(){
    $scope.message="Hurray !!! New Message";  
    $scope.$digest();
   },3000);
}

请注意，使用$ digest而不是$ apply（性能相关）要好得多：

范围。$ digest（）将在当前范围及其所有子项上触发观察者。范围。$ apply将评估传递的函数并运行$ rootScope。$ digest（）

Answer 2

每个变化都应该在角度消化周期内发生。如果您从外部更改值（这正是发生的情况，如果您使用setTimeout而不是角度$timeout），则角度不会更新您的视图，直到下一个摘要周期（https://www.ng-book.com/p/The-Digest-Loop-and-apply/）。因此，在您的情况下，message已设置，但视图尚未更新。

尝试这样的事情：

app.controller('myController', function($scope, $timeout) {
  $scope.changeMessage = function() {
    $timeout(function(){
      console.log("Message changed");
      $scope.message="Hurray !!! New Message";    
    }, 3000);

  $scope.newMessage=function() {
    $scope.message="hello";
    console.log("new message");
  };

Answer 3

更改未反映在视图中的原因是因为分配是在setTimeout中的回调中完成的，这导致角度没有注意到更改。这与所谓的digest周期有关。有不同的方法来解决这个问题。

使用$scope.$apply()来包装作业

甚至更好地使用由角度提供的现有$timeout服务，而不是调用setTimeout已经为您解决上述问题。

有关详细信息，请参阅https://docs.angularjs.org/api/ng/service/$timeout了解$ timeout的使用情况

和https://docs.angularjs.org/api/ng/type/$rootScope.Scope因为$ apply背后的原因。

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

描述了对此处发生的事情的一般解释

Angular JS中的双向绑定

3 个答案: