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: 
Después de mouseenter:
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: 
Después de la entrada:
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