AngularJS and DOM Manipulation

This is an example of how to manipulate the DOM in AngularJS.

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<my-widget>
    <div id="one" class="box"></div>
    <div id="two" class="box"></div>    
</my-widget>
<p>
   sds
</p>

CSS

.box {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
    cursor:pointer
}

JavaScript

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

myApp.directive('myWidget', function() {
    var linkFn;
    linkFn = function(scope, element, attrs) {
    alert('dkdk');
        var animateDown, animateRight, pageOne, pageTwo;
        pageOne = angular.element(element.children()[0]);
        pageTwo = angular.element(element.children()[1]);

        animateDown = function() {
            $(this).animate({
                top: '+=50'
            });
        };

        animateRight = function() {
            $(this).animate({
                left: '+=50'
            });
        };

        $(pageOne).on('click', animateDown);
        $(pageTwo).on('click', animateRight);
    };
    return {
        restrict: 'E',
        link: linkFn
    };
});