AngularJS 1イベント - コールバックメソッドの "this"変数がウィンドウです

AngularJS 1.6イベントを使用する方法を学習しようとしています。
私がイベントに登録されているコンポーネントを作成しました：AngularJS 1イベント - コールバックメソッドの "this"変数がウィンドウです

'use strict'; 
var module = angular.module("Test", []); 
module.controller("Controller1", Controller1); 

Controller1.$inject = ["$scope"]; 
function Controller1($scope) { 
    var self = this; 
    self.try = function() { 
     $scope.$broadcast("test:try"); 
    } 
} 
module.controller("Controller2", Controller2); 
module.component("compo2", { 
    controller: "Controller2", 
}); 


Controller2.$inject = ["$scope"]; 
function Controller2($scope) { 
    var self = this; 
    this.$onInit = function() { 
     $scope.$on("test:try", self.try); 
    } 

    self.try = function (event, data) { 
     console.log("Logged event!!!") 
    } 
}

をして、これは私のhtmlファイルです：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="./Test/angular.js"></script> 
    <script src="./compoTest.js"></script> 
</head> 
<body ng-app="Test" ng-controller="Controller1 as ctrl1"> 
     <compo2> T.E.S.T </compo2> 
     <button ng-click="ctrl1.try();"> Try! </button> 
</body> 
</html>

しかし、コールバック「してみてください」と呼ばれている - 私はthis変数ことがわかり私のコンポーネントのコントローラの代わりにウィンドウです。

私は間違っていますか？

出典

2017-01-28 Idov

これは、オブジェクトメソッドがJSのコールバックとして呼び出されたときに起こります。 windowを誤って使用することを避けるために

、JSファイルの先頭にstrictモードを使用します。

'use strict';

方法は、コンテキストにバインドする必要があります。

this.try = function (event, data) { 
    this.... 
}.bind(this);

それともselfレシピを使用する必要があります：

var self = this; 

self.try = function (event, data) { 
    self.... 
};

出典

2017-01-28 14:58:40 estus

こんにちは、それは助けになりませんでした。変更を加えて自分のコードを編集しました... – Idov

'try'に' this'や 'self'を使用しません。使用しているコードと投稿したコードがどのように違うかは不明です。 – estus

"try"にブレークポイントを設定し、 "this"の値を見るためにchrome devtoolsコンソールを使用しました...私は編集バージョンで "Self"を使用しました。 – Idov

AngularJS 1イベント - コールバックメソッドの "this"変数がウィンドウです

答えて

関連する問題