AngularJS examples

animate-original.html

<my-widget>
    <div id="one" class="box"></div>
    <div id="two" class="box"></div>    
</my-widget>

animate-original.js

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

myApp.directive('myWidget', function() {
    var linkFn;
    linkFn = function(scope, element, attrs) {
        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
    };
});

animate.html

<box move="down"></box>
<box move="right"></box>
<box move="down right"></box>

animate.js

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: {}
    };
});

//see JS Fiddle at http://jsfiddle.net/3rom9aoz/36/

server-directive.html

<div>
<a href="#" ng-click="loadIp = true">Load IP</a>
<a href="#" ng-click="loadDate = true">Load date</a>
    <p>Your IP:
        <server-data id="ip" load="{{loadIp}}"></server-data>
    </p>
    <p>Today is:
        <server-data id="date" load="{{loadDate}}"></server-data>
    </p>
</div>

server-directive.js

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

myApp.directive('serverData', function ($http) {
    var linkFn = function (scope, element, attrs) {
        attrs.$observe('load', function (value) {
            if (value == "true") {
                $http.get('http://' + attrs.id + '.jsontest.com/').then(function (result) {
                    scope.data = result.data;
                });
            }
        });
    };

    return {
        restrict: 'EA',
        link: linkFn,
        template: '<span>{{data}}</span>',
        scope: {}
    }
});

//see JS Fiddle at http://jsfiddle.net/v7Lhh384/22/

server.js

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

var MainCtrl = function ($http) {
    main = this;
    this.load = function (what) {
        if (what == 'ip') {
            $http.get('http://ip.jsontest.com/').then(function (result) {
                main.ip = result.data.ip;
            });
        }
        if (what == 'date') {
            $http.get('http://date.jsontest.com/').then(function (result) {
                main.date = result.data.date;
            });
        }
    }
};

myApp.controller('MainCtrl', MainCtrl);

//see JS Fiddle at http://jsfiddle.net/5xm4yqvL/25/