July 5, 2016

angular.element

angular.element Function – This function is basically alias for the jQuery. If jQuery is not available angular.element can be used. angular.element is built in sub set “jQuery”, which is called “jQuery lite” or “jQlite”

Here in this tutorial we are going to explain the angular.element with example and demo. You can use our online editor to edit and run the example.

angular.element Syntax | Example | Demo

Syntax

Syntax for the angular.element is given below –

Syntax:

angular.element(element);

Where element is DOM element.

Arguments

element – DOM element

AngularJs jqLite Available Functions

Following jQuery methods are avialable in jQlite –

addClass() – first argument Not supported as function.
after()
append()
attr() – parameters not supported as function.
bind() – namespaces, selectors or eventData not supported.
children() – selectors not supported.
clone()
contents()
css() – Only retrieves inline-styles, does not call getComputedStyle(). As a setter, does not convert numbers to strings or append ‘px’, and also does not have automatic property prefixing.
data()
detach()
empty()
eq()
find() – Limited to lookups by tag name
hasClass()
html()
next() – selectors not supported.
on() – namespaces, selectors or eventData not supported.
off() – namespaces, selectors or event object as parameter not supported.
one() – namespaces or selectors not supported.
parent() – selectors not supported.
prepend()
prop()
ready()
remove()
removeAttr()
removeClass() – first argument not supported as function.
removeData()
replaceWith()
text()
toggleClass() – first argument not supported as function.
triggerHandler() – Passes a dummy event object to handlers.
unbind() – namespaces or event object as parameter not supported.
val()
wrap()

Example

Here is simple example of angular element function-

angular.element Example :

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
 $scope.counter = 0;
 $scope.angularCount = function() {
	  $scope.counter++;
    };
});
 function jQliteCount(){
	 var curr = angular.element(count).html();
	 angular.element(count).html(++curr);
 }
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController"> 
 
 <form novalidate class="simple-form">
   
   
    <button ng-click ="angularCount()">Angular Counter</button>
    <button onclick="jQliteCount()">jQLite Counter</button>
	<p>Angular Counter = {{counter}}</p>
    <p>jQLite Counter = <span id="count">0</span></p>
  </form>
</div> 
</div>
</body>  
</html>

Try it »

Here we have create an example which have both method to create function and call it. You run the above example to see how jQuery lite works in angularJs. If you run the above example it will produce output something like this –

Add Comment

📖 Read More

AngularJs Api tutorials