2017-01-13 77 views
0

我嘗試學習angular1.6,在這個例子中,我不知道我犯了什麼錯誤。

假設在3秒鐘後在屏幕上和控制檯上打印消息變量中相同的文本,當我單擊「獲取消息」按鈕時。

(function() { 
 
\t "use strict"; 
 
\t angular.module('myApp',[]) 
 
    .component('myComponent', { 
 
     template: "<button ng-click='$ctrl.scheduleTask()'>Get Message</button><br><p>Message fetched: {{$ctrl.message}}</p>", 
 
     controller: function() { 
 
     self = this; 
 
     self.scheduleTask = function() { 
 
      setTimeout(function() { 
 
      self.$apply(function() { 
 
       self.message = 'Fetched after 3 seconds'; 
 
       console.log('message = ' + self.message); 
 
      }); 
 
      }, 3000); 
 
     }; 
 
     } 
 
    }) 
 
})();
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
\t <meta charset="utf-8" /> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <my-component></my-component> 
 
</body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
</html>

+0

這是因爲你不使用$ scope。 $ apply可以在範圍上使用 – Groben

回答

1

嘗試使用$來代替範圍:

(function() { 
    "use strict"; 
    angular.module('myApp',[]) 
    .component('myComponent', { 
     template: "<button ng-click='$ctrl.scheduleTask()'>Get Message</button><br><p>Message fetched: {{$ctrl.message}}</p>", 
     controller: myComponentController 
    }); 

    myComponentController.$inject['$scope']; 

    function myComponentController($scope) { 
     self = this; 
     self.scheduleTask = function() { 
      setTimeout(function() { 
      $scope.$apply(function() { 
       self.message = 'Fetched after 3 seconds'; 
       console.log('message = ' + self.message); 
      }); 
      }, 3000); 
     }; 
     } 
})(); 

一個更正確的方法是使用$超時:

$timeout

(function() { 
    "use strict"; 
    angular.module('myApp',[]) 
    .component('myComponent', { 
     template: "<button ng-click='$ctrl.scheduleTask()'>Get Message</button><br><p>Message fetched: {{$ctrl.message}}</p>", 
     controller: myComponentController 
    }); 

    myComponentController.$inject['$timeout']; 

    function myComponentController($timeout) { 
     self = this; 
     self.scheduleTask = function() { 
      $timeout(function() { 
       self.message = 'Fetched after 3 seconds'; 
       console.log('message = ' + self.message); 
      }, 3000, true); 
     }; 
     } 
})(); 
+0

謝謝我的朋友的幫助。看起來你是對的:)。 –

+0

請注意,「true」不是必需的,$ timeout將默認使用$ apply。 – Groben

+0

我必須等3分鐘才能投票,因爲他們告訴我我只有3分鐘到期才能投票。 –

相關問題