透過 directive 控制對齊方式

參考現成js : https://gist.github.com/egermano/7451739
或直接把directive 放入自己的 module

.directive('align', function ($timeout) {
        'use strict';

        var linker = function (scope, element, attrs) {
            var options = attrs['align'].split(" "),
                listner = attrs['alignWatch'];

            var positioner = function () {
                angular.forEach(options, function (value, key) {

                    element.css('position', 'absolute');

                    switch (value) {
                        case 'top':
                            element.css({
                                top: '0',
                                marginTop: '0'
                            });
                            break;
                        case 'bottom':
                            element.css({
                                bottom: '0',
                                marginBottom: '0'
                            });
                            break;
                        case 'middle':
                            element.css({
                                top: '50%',
                                marginTop: ((element.height() / 2) * -1) + 'px'
                            });
                            break;
                        case 'right':
                            element.css({
                                right: '0',
                                marginRight: '0'
                            });
                            break;
                        case 'left':
                            element.css({
                                left: '0',
                                marginLeft: '0'
                            });
                            break;
                        case 'center':
                            element.css({
                                left: '50%',
                                marginLeft: ((element.width() / 2) * -1) + 'px'
                            });
                            break;
                    }
                });
            }

            $(window).resize(function () {
                positioner();
            });

            if (listner) {
                scope.$watch(listner, function () {
                    positioner();
                });
            };

            $timeout(function () {
                positioner();
            });
        };

        return {
            restrict: 'A',
            link: linker
        };
    })