My Index.html looks like :::

<!DOCTYPE html>
<html ng-app="myModule">
    <title>Dom Magic</title>   
    <script src="lib/jquery-1.9.1.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script type="text/javascript" src="dom.js"></script>
    <link rel="stylesheet" href="styles/dom.css">
    <div id="one" class="RedBox"></div>
    <div id="two" class="GreenBox"></div>

After running this WebApp , We will see the UI like this Image …


My dom.css has this style :::

    position: relative;
    background-color: RED;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;
    cursor: pointer

    position: relative;
    background-color: GREEN;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;
    cursor: pointer

My dom.js has the directive (Custom HTML Tag) which is used at index.html page .

var myModule = angular.module('myModule',[]);

myModule.directive('myWidget', function () {
    linkFn = function (scope, element, attrs) {

        var boxOne = element.children()[0];
        var boxTwo = element.children()[1];

        var animateRight = function () {
                left: '+=50'

        var animateDown = function () {
                top: '+=50'


    return {
        restrict: 'E',
        link: linkFn


AngularJS – DOM Manipulation With Custom Directive and jQuery Animation


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s