在AngularJS服务中使用“this”
请检查下面的代码。我编辑了一个弹出窗口的示例来说明 在showAlert1上,我按原样引用“this”,但它不起作用。在showAlert2上,我使用一个辅助变量“\u this”来接收“this”,它确实可以工作 我在其他场合也见过这种情况,我相信这是与“Controller as”语法作用域相关的,但为什么会发生这种情况呢在AngularJS服务中使用“this”,angularjs,angularjs-scope,Angularjs,Angularjs Scope,请检查下面的代码。我编辑了一个弹出窗口的示例来说明 在showAlert1上,我按原样引用“this”,但它不起作用。在showAlert2上,我使用一个辅助变量“\u this”来接收“this”,它确实可以工作 我在其他场合也见过这种情况,我相信这是与“Controller as”语法作用域相关的,但为什么会发生这种情况呢 angular.module('myApp', ['ionic']) .controller('PopupCtrl',function($scope, $ionicPop
angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
this.testAlert = function() {
alert('Alerting!');
};
this.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, this).then(function() {
this.testAlert();
});
};
this.showAlert2 = function() {
var _this = this;
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, _this).then(function() {
_this.testAlert();
});
};
});
这是一支密码笔:
谢谢 关键字“this”指的是它所在的当前对象。因此,在showAlert1函数中,“this”指的是$ionicPopup对象 比如说
var parent = {
value: 'parent',
alert: function(){
alert(this.value);
},
child: {
alert: function(){
alert(this.value);
}
}
}
如果执行parent.alert,它将向父级发出警报。但是,如果您执行parent.child.alert,它将为您提供未定义的,因为子级的“this.value”不存在,它不会引用parent.value。这意味着它引用了当前对象。javascript中的这一点与其他语言中的不同。您可以将其更多地视为函数调用的上下文 web应用程序上的默认调用上下文是window。但是,当调用作为对象属性的函数时,上下文将成为对象 因此,在您的示例中:
angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
//"this" refers to the controller instance here (controllers are created by angular with the "new" operator)
this.testAlert = function() {
//inside of this function, "this" will still be the controller
alert('Alerting!');
};
//"this" is the controller
this.showAlert1 = function() {
//"this" is still the controller
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, this).then(function() {
//"this" is no longer the controller. It's probably "window", but it's possible that ionic sets this to some other parameter when it invokes the function.
//since it's not the controller, testAlert() is undefined!
this.testAlert();
});
};
//"this" is the controller
this.showAlert2 = function() {
//"this" is still the controller, and you have assigned _this to also be the controller
var _this = this;
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, _this).then(function() {
//"_this" is captured by the closure created by the function call, and it is still the controller, so testAlert() is defined.
_this.testAlert();
});
};
});
您经常会在代码中看到这一点:
var self = this;
为了避免你所遇到的困惑,用self来代替它
angular.module('myApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
var self = this;
self.testAlert = function() {
alert('Alerting!');
};
self.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, self).then(function() {
self.testAlert();
});
};
self.showAlert2 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, self).then(function() {
self.testAlert();
});
};
});
showAlert1中的.then回调中的这是指全局对象。试试这个:
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
this.testAlert = function() {
alert('Alerting!');
};
this.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, this).then(function() {
alert(this === window);
this.testAlert();
});
};
this.showAlert2 = function() {
var _this = this;
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}, _this).then(function() {
_this.testAlert();
});
};
});
这仅适用于showAlert1和showAlert2,因为此处将它们称为控制器本身的属性:
<button class="button button-primary" ng-click="popup.testAlert()">
伟大解释的可能重复。谢谢有没有办法知道所有对象的上下文,比如上下文树?
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Popups
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="PopupCtrl">
<button class="button button-primary" ng-click="testAlert()">
Test Alert
</button>
<button class="button button-positive" ng-click="showAlert1()">
Alert1
</button>
<button class="button button-positive" ng-click="showAlert2()">
Alert2
</button>
<script id="popup-template.html" type="text/ng-template">
<input ng-model="data.wifi" type="text" placeholder="Password">
</script>
</body>
</html>
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup) {
$scope.testAlert = function() {
alert('Alerting!');
};
$scope.showAlert1 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}).then(function() {
$scope.testAlert();
});
};
$scope.showAlert2 = function() {
$ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
}).then(function() {
$scope.testAlert();
});
};
});