Maison > Article > interface Web > Interprétation détaillée du concept d'objet window $window dans AngularJS
Interprétation détaillée du concept d'objet window $window dans AngularJS
- 亚连original
- 2018-06-11 16:26:381798parcourir
Cet article présente principalement l'objet window $window d'AngularJS. Maintenant, je le partage avec vous et le donne comme référence.
Une référence à un objet de fenêtre de navigateur. Il s'agit d'un objet global et disponible globalement dans la fenêtre, mais il pose quelques problèmes. Il est également souvent mentionné dans Angular via le service $window, afin qu'il puisse être remplacé, supprimé et testé.
Code de vérification :
$window 等同于 window。
(function(){
angular.module('Demo', [])
.controller('testCtrl',["$window",testCtrl]);
function testCtrl($window) {
$window === window;
}
}());L'objet $window peut être utilisé pour obtenir diverses propriétés de la fenêtre du navigateur (telles que la hauteur et la largeur de la fenêtre, la version du navigateur, etc.).
1. Contexte du problème
Imprimez le contenu de la zone de saisie via l'objet $window
2. >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS之$window窗口对象</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("winApp",[]);
app.controller("winCon",function($window,$scope){
$scope.phone = "15969569556";
$scope.showPhone = function(){
$window.alert("您输入的手机号是："+$scope.phone);
};
});
</script>
</head>
<body ng-app="winApp">
<p ng-controller="winCon">
<input type="text" id="phone" maxlength="11" ng-model="phone"/>
<button ng-click="showPhone();">显示手机号</button>
</p>
</body>
</html>3. Résultats de la mise en œuvre
PS : écriture de la fonction window.resize dans angulairejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $window) {
$scope.default = "hello world";
var w = angular.element($window);
w.bind('resize', function(){
console.log(new Date())
})
});
</script>
</head>
<body>
<p ng-app="myApp" ng-controller="myCtrl">
<h1>{{default}}</h1>
</p>
</body>
</html>J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir. Articles associés :
3 modes de base des paramètres de routage de vue (tutoriel détaillé)
Package et fichier dans webpack Charger vers le spécifié emplacement (tutoriel détaillé)
Créer un fil d'Ariane via elementUI dans vue2.0
Mettre js dans le webpack Fichier de carte packagé (tutoriel détaillé )
Le problème d'obtention de la taille de téléchargement du chemin d'image compressé dans Webpack (tutoriel détaillé)
en vue Projets pratiques dans +iview+ less+echarts (tutoriel détaillé)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!