Interprétation détaillée du concept d'objet window $window dans AngularJS-js tutoriel-php.cn

Interprétation détaillée du concept d'objet window $window dans AngularJS

亚连

Libérer： 2018-06-11 16:26:38

original

1878 Les gens l'ont consulté

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(&#39;Demo&#39;, [])
   .controller(&#39;testCtrl&#39;,["$window",testCtrl]);
   function testCtrl($window) {
     $window === window;
   }
 }());

Copier après la connexion

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>

Copier après la connexion

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(&#39;myApp&#39;, []);
  app.controller(&#39;myCtrl&#39;, function ($scope, $window) {
   $scope.default = "hello world";
   var w = angular.element($window);
   w.bind(&#39;resize&#39;, function(){
    console.log(new Date())
   })
  });
 </script>
</head>
<body>
<p ng-app="myApp" ng-controller="myCtrl">
<h1>{{default}}</h1>
</p>
</body>
</html>

Copier après la connexion

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!