Detaillierte Interpretation des Konzepts des Fensterobjekts $window in AngularJS-js-Tutorial-php.cn

Detaillierte Interpretation des Konzepts des Fensterobjekts $window in AngularJS

亚连

Freigeben： 2018-06-11 16:26:38

Original

1905 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Fensterobjekt $window von AngularJS vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Ein Verweis auf ein Browserfensterobjekt. Es ist ein globales Objekt und im Fenster global verfügbar, verursacht jedoch einige Probleme. Außerdem wird in Angular häufig über den $window-Dienst darauf verwiesen, sodass es überschrieben, entfernt und getestet werden kann.

Bestätigungscode:

$window 等同于 window。
 (function(){
   angular.module(&#39;Demo&#39;, [])
   .controller(&#39;testCtrl&#39;,["$window",testCtrl]);
   function testCtrl($window) {
     $window === window;
   }
 }());

Nach dem Login kopieren

Das $window-Objekt kann verwendet werden, um verschiedene Eigenschaften des Browserfensters abzurufen (z. B. Fensterhöhe und -breite, Browserversion usw.).

1. Problemhintergrund

Drucken Sie den Inhalt des Eingabefelds über das $window-Objekt

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>

Nach dem Login kopieren

3. Implementierungsergebnisse

PS: Window.resize-Funktion in AngularJS schreiben

 <!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>

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

3 Grundmodi der Vue-Routing-Parameter (ausführliches Tutorial)

Paket und Datei im Webpack werden auf die angegebene Weise geladen Standort (ausführliches Tutorial)

Erstellen Sie eine Breadcrumb-Navigationsleiste über elementUI in vue2.0

Fügen Sie js in das Webpack ein. Verpackte Kartendatei (ausführliches Tutorial). )

Das Problem, die Upload-Größe eines pfadkomprimierten Bildes in Webpack zu erhalten (ausführliches Tutorial)

in vue Praktische Projekte in +iview+ less+echarts (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des Konzepts des Fensterobjekts $window in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!