AngularJS and DOM Manipulation

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

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<box move="down"></box>
<box move="right"></box>
<box move="down right"></box>

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('box', function () {
    var linkFn;
    linkFn = function (scope, element, attrs) {        
               
        scope.click = function () {
            var opts = {};
            if (attrs.move.indexOf('right') != -1) {
                opts.left = '+=50px';
            }

            if (attrs.move.indexOf('down') != -1) {
                opts.top = '+=50px';
            }
            
            $(element.children()[0]).animate(opts, "slow");
        };

    };
    return {
        restrict: 'EA',
        link: linkFn,
        template: '<div class="box" ng-click="click()"></div>',
        scope: {}
    };
});

angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
});