In this tutorial, I will be talking about how to manipulate DOM using jqLite. jqLite is a subset of jquery which allows angular to manipulate DOM. Let's start by creating the basic structure. Create two files described below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS DOM manipulation with jqLite</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="myApp">
<my-directive></my-directive>
</div>
</body>
</html>
app.js
'use strict';
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
template: '<h1>This is myDirective</h1>',
restrict: 'E',
replace: true,
link: function (scope, element, attrs) {
}
};
});
Open index.html in the browser, the output will be "This is myDirective" in heading1.
## Angular's jqLite (source: AngularDocs) {#angular-s-jqlite} jqLite provides only the following jQuery methods:
- addClass()
- after()
- append()
- attr()
- bind() – Does not support namespaces, selectors or eventData
- children() – Does not support selectors
- clone()
- contents()
- css()
- data()
- detach()
- empty()
- eq()
- find() – Limited to lookups by tag name
- hasClass()
- html()
- next() – Does not support selectors
- on() – Does not support namespaces, selectors or eventData
- off() – Does not support namespaces or selectors
- one() – Does not support namespaces or selectors
- parent() – Does not support selectors
- prepend()
- prop()
- ready()
- remove()
- removeAttr()
- removeClass()
- removeData()
- replaceWith()
- text()
- toggleClass()
- triggerHandler() – Passes a dummy event object to handlers.
- unbind() – Does not support namespaces
- val()
- wrap()
In the case of angular jqLite, angular.element is used as a alias for jQuery or $ as in the jQuery. Let's take a look at some of the functions jqLite supports, replace the code corresponding to the function with app.js.
text()
'use strict';
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
template: '<h1>This is myDirective</h1>',
restrict: 'E',
replace: true,
link: function (scope, element, attrs) {
element.text('this is the myDirective directive');
}
};
});
prepend(), append()
'use strict';
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
template: '<h1>This is myDirective</h1>',
restrict: 'E',
replace: true,
link: function (scope, element, attrs) {
element.prepend('this is prepend text <hr/>');
element.append('<hr/> this is append text');
}
};
});
bind(), addClass(), toggleClass()
'use strict';
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
template: '<h1>This is myDirective</h1>',
restrict: 'E',
replace: true,
link: function (scope, element, attrs) {
element.addClass('btn btn-primary');
element.bind('click', function(event) {
element.toggleClass('btn btn-primary');
});
}
};
});
Similarly, all the other functions can be used like this. Also, if you want you can use complete jQuery library and use it with Angular. Angular & jQuery works well with each other.