AngularJS | función angular.element()

La función angular.element() en AngularJS se usa para inicializar el elemento DOM o la string HTML como un elemento jQuery . Si jQuery está disponible, angular.element se puede usar como un alias para la función jQuery o se puede usar como una función para envolver el elemento o la string en jqlite de Angular .

Sintaxis:

angular.element(element)

Donde elemento se refiere al elemento HTML DOM o la string que se envolverá en jQuery.

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
    </script>
    <title>
      angular.element()
  </title>
</head>
  
<body ng-app="app">
    <h1 style="color:green">
      GeeksforGeeks
  </h1>
    <h2>
      angular.element()
  </h2>
  
    <div ng-controller="geek">
        <div ng-mouseenter="style()"
             id="ide" 
             ng-mouseleave="remove()">
            {{name}}
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', '$document',
            function($scope, $document) {
                $scope.name = "GeeksforGeeks";
                
                $scope.style = function() {
                 angular.element(
                   $document[0].querySelector('#ide')).css({
                        'color': 'white',
                        'background-color': 'green',
                        'width': '200px'
                    });
                };
                $scope.remove = function() {
                 angular.element(
                   $document[0].querySelector('#ide')).css({
                        'color': 'black',
                        'background-color': 'white'
                    });
                };
            }
        ]);
    </script>
  
</body>
  
</html>

Salida:
Antes de mouseenter:
elemento
Después de mouseenter:
elemento

Ejemplo-2:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
    </script>
    <title>
      angular.element()
  </title>
</head>
  
<body ng-app="app" 
      style="text-align:Center">
    <h1 style="color:green">
      GeeksforGeeks
  </h1>
    <h2>
      angular.element()
  </h2>
    <div ng-controller="geek">
        <input type="text" 
               id="text" 
               ng-model="myVal" />
        
        <button ng-click="getVal()">
          Click me!
      </button>
        <br />
        <br><b>You typed:</b> {{value}}
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', 
           '$document', function($scope, $document) {
                $scope.myVal = "";
                $scope.getVal = function() {
                  $scope.value = angular.element(
                    $document[0].querySelector(
                      '#text')).val();
            }
        }]);
    </script>
</body>
  
</html>

Salida:
Antes de la entrada:
elemento
Después de la entrada:
elemento

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *