Uncaught TypeError：self。$ applyはAngular1.6の関数ではありません。

私は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>

出典

2017-01-13 John Smith

$ scopeを使用していないためです。スコープで$ applyを使うことができます – Groben

代わりに$スコープを使用してみてください：

(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); 
     }; 
     } 
})();

出典

2017-01-13 13:21:12 Groben

私の友人に助けていただきありがとうございます。あなたが正しいように見えます:)。 –

"true"は不要であることに注意してください。$ timeoutはデフォルトで$ applyを使用します。 – Groben

3分が切れるまで私が投票できないと言ったので、私は投票するのに3分待たなければなりませんでした。 –

Uncaught TypeError：self。$ applyはAngular1.6の関数ではありません。

答えて

関連する問題