AngularJS $document Service

The AngularJS $document is wrapper for the browser's window.document object. The $document is a jQuery collection, not a direct reference to the HTML document object. When use $document into AngularJS application, it returns a jQuery collection (or jQLite collection) that contains the document object and its properties.

Syntax

console.log( $document.title );
console.log( $document.cookie );
console.log( $document.body );

AngularJS $document Service Example

<!DOCTYPE html>    
<html>    
<head> <!-- www.techstrikers.com -->    
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>     
    <meta charset="utf-8">    
    <title>AngularJS $document Example</title>    
  <script>    
var app = angular.module('app', []);    
    app.controller("FilterController", function ($scope,$document) {    
      $scope.title = '';  
      $scope.cookie = '';  
      $scope.DocumentTitle = function()    
      {    
        $scope.title = $document[0].title;    
          
      }    
      $scope.DocumentCookies = function()    
      {    
         $scope.cookie = $document[0].cookie;       
      }    
    });    
</script>    
</head>    
<body style="background-color:#DDE4E9;">    
  <fieldset style="background-color:#DDE4E9;">                
    <legend>AngulerJS $document Service Example</legend>     
  <div ng-app="app">          
    <div ng-controller="FilterController">     
      Get Document Title:            
        <input type="string" ng-model="title">            
        <button ng-click="DocumentTitle()">Documnet Title</button></br>         
      Get Document Cookie:          
        <input type="string" ng-model="cookie">            
        <button ng-click="DocumentCookies()">Document Cookies</button> </br> 
    </div>          
</div>    
 </fieldset>     
</body>    
</html>

See Live Example

« Previous