linker_erp/www/js/start/directive.js

starter.directive('itemMember', function (Dept) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div><ion-checkbox ng-model="emp.selected"  ng-disabled="emp.disabled" ng-change="change(emp)" class="ion-checkbox-class">' +
        '<img ng-src="../../../img/panda.png" />' +
        '<label class="labelname">{{emp.username}}</label>' +
        '<label class="labelrole">{{emp.degree}}</label>' +
        '</ion-checkbox>' +
        '</div>'
    };
})

.directive('itemDept', function (Dept) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>' +
        '<ion-item class="item item-icon-right"  type="item-text-wrap" ng-click="changedept(dept);">' +
        '{{dept.depname}}' +
        '<i class="icon ion-chevron-right icon-accessory" ng-show="dept.isShow"></i>' +
        '</ion-item>' +
        '</div>'
    };
})

.directive('footerMember', function (Dept) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="bar bar-footer bar-dark footer-div" ng-class={true:"bigview",false:""}[isUp]>' +
        '<i class="cirl-i" ng-class={true:"ion-ios-arrow-down",false:"ion-ios-arrow-up"}[isUp] ng-click="isUp = !isUp"></i>' +
        '<ul class="ul-imgs dept-icon">' +
        '<li ng-repeat="user in selectedemplst">{{user.username}}</li>' +
        '</ul>' +
        '<button ng-disabled="selectedemplst.length==0" ng-click="ok();" class="button pull-right button-calm">确定{{selectcount}}</button>' +
        '</div>'
    };
})

.directive('rjCloseBackDrop', [function () {
    return {
        scope: false,
        restrict: 'A',
        replace: false,
        link: function (scope, iElm, iAttrs, controller) {
            var htmlEl = angular.element(document.querySelector('html'));
            htmlEl.unbind("click");
            htmlEl.on("click", function (event) {
                if (event.target.nodeName === "HTML" &&
                    scope.popup.optionsPopup &&
                    scope.popup.isPopup) {
                    scope.popup.optionsPopup.close();
                    scope.popup.isPopup = false;
                } else if (event.target.nodeName === "DIV" &&
                    scope.popup.optionsPopup &&
                    scope.popup.isSetPopup) {
                    scope.popup.optionsPopup.close();
                    scope.popup.isSetPopup = false;
                }
            });
        }
    };
}])

//放大缩小图片
.directive('ngPinchZoom', [function () {
    var _directive = {
        restrict: 'A',
        scope: false,
        link: _link
    };

    function _link(scope, element, attrs) {
        var elWidth, elHeight;

        // mode : 'pinch' or 'swipe'
        var mode = '';

        // distance between two touche points (mode : 'pinch')
        var distance = 0;
        var initialDistance = 0;

        // image scaling
        var scale = 1;
        var relativeScale = 1;
        var initialScale = 1;
        var maxScale = parseInt(attrs.maxScale, 10);
        if (isNaN(maxScale) || maxScale <= 1) {
            maxScale = 3;
        }

        // position of the upper left corner of the element
        var positionX = 0;
        var positionY = 0;

        var initialPositionX = 0;
        var initialPositionY = 0;

        // central origin (mode : 'pinch')
        var originX = 0;
        var originY = 0;

        // start coordinate and amount of movement (mode : 'swipe')
        var startX = 0;
        var startY = 0;
        var moveX = 0;
        var moveY = 0;

        var image = new Image();
        image.onload = function () {
            elWidth = element[0].clientWidth;
            elHeight = element[0].clientHeight;

            element.css({
                '-webkit-transform-origin': '0 0',
                'transform-origin': '0 0'
            });

            element.on('touchstart', touchstartHandler);
            element.on('touchmove', touchmoveHandler);
            element.on('touchend', touchendHandler);
        };

        if (attrs.ngSrc) {
            image.src = attrs.ngSrc;
        } else {
            if (attrs.src) {
                image.src = attrs.src;
            }
        }

        /**
         * @param {object} evt
         */
        function touchstartHandler(evt) {
            var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;

            startX = touches[0].clientX;
            startY = touches[0].clientY;
            initialPositionX = positionX;
            initialPositionY = positionY;
            moveX = 0;
            moveY = 0;
        }

        /**
         * @param {object} evt
         */
        function touchmoveHandler(evt) {
            var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;

            if (mode === '') {
                if (touches.length === 1 && scale > 1) {

                    mode = 'swipe';

                } else if (touches.length === 2) {

                    mode = 'pinch';

                    initialScale = scale;
                    initialDistance = getDistance(touches);
                    originX = touches[0].clientX -
                        parseInt((touches[0].clientX - touches[1].clientX) / 2, 10) -
                        element[0].offsetLeft - initialPositionX;
                    originY = touches[0].clientY -
                        parseInt((touches[0].clientY - touches[1].clientY) / 2, 10) -
                        element[0].offsetTop - initialPositionY;

                }
            }

            if (mode === 'swipe') {
                evt.preventDefault();

                moveX = touches[0].clientX - startX;
                moveY = touches[0].clientY - startY;

                positionX = initialPositionX + moveX;
                positionY = initialPositionY + moveY;

                transformElement();

            } else if (mode === 'pinch' && touches.length === 2) {
                evt.preventDefault();

                distance = getDistance(touches);
                relativeScale = distance / initialDistance;
                scale = relativeScale * initialScale;

                positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
                positionY = originY * (1 - relativeScale) + initialPositionY + moveY;

                transformElement();

            }
        }

        /**
         * @param {object} evt
         */
        function touchendHandler(evt) {
            var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;

            if (mode === '' || touches.length > 0) {
                return;
            }

            if (scale < 1) {

                scale = 1;
                positionX = 0;
                positionY = 0;

            } else if (scale > maxScale) {

                scale = maxScale;
                relativeScale = scale / initialScale;
                positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
                positionY = originY * (1 - relativeScale) + initialPositionY + moveY;

            } else {

                if (positionX > 0) {
                    positionX = 0;
                } else if (positionX < elWidth * (1 - scale)) {
                    positionX = elWidth * (1 - scale);
                }
                if (positionY > 0) {
                    positionY = 0;
                } else if (positionY < elHeight * (1 - scale)) {
                    positionY = elHeight * (1 - scale);
                }

            }

            transformElement(0.1);
            mode = '';
        }

        /**
         * @param {Array} touches
         * @return {number}
         */
        function getDistance(touches) {
            var d = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) +
                Math.pow(touches[0].clientY - touches[1].clientY, 2));
            return parseInt(d, 10);
        }

        /**
         * @param {number} [duration]
         */
        function transformElement(duration) {
            var transition = duration ? 'all cubic-bezier(0,0,.5,1) ' + duration + 's' : '';
            var matrixArray = [scale, 0, 0, scale, positionX, positionY];
            var matrix = 'matrix(' + matrixArray.join(',') + ')';

            element.css({
                '-webkit-transition': transition,
                transition: transition,
                '-webkit-transform': matrix + ' translate3d(0,0,0)',
                transform: matrix
            });
        }
    }

    return _directive;
}])

.directive('focusMe', function ($timeout) {
    return {
        scope: {
            trigger: '=focusMe'
        },
        link: function (scope, element) {
            scope.$watch('trigger', function (value) {
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
        }
    };
})

.directive('imagePopover', [function () {
    return {
        restrict: "E",
        scope: {
            allImages: '='
        },
        template: "<img ng-repeat='img in allImages' ng-click='showImages($index,$event)' ng-src='{{img.file_thumbnail_path}}' class='img-popver-pad'/>",
        controller: function ($scope, $rootScope, $ionicModal) {
            $scope.showImages = function (index, event) {
                if (event != undefined) {
                    event.stopPropagation();
                }
                $scope.activeSlide = index;
                $scope.showModal('../../templates/modal-imagepopover.html');
            };

            $scope.bigImage = $rootScope.commons.bigImage;
            $scope.showModal = function (templateUrl) {
                $rootScope.commons.fun = clear_change;
                $rootScope.commons.bigImage = true;
                $ionicModal.fromTemplateUrl(templateUrl, {
                    scope: $scope,
                    animation: 'slide-in-up'
                }).then(function (modal) {
                    $rootScope.commons.modal = modal;
                    $rootScope.commons.modal.show();
                });
            };

            $scope.closeModal = function () {
                clear_change();
                $rootScope.commons.fun = null;
            };

            function clear_change() {
                $rootScope.commons.bigImage = false;
                $rootScope.commons.modal.hide();
                $rootScope.commons.modal.remove();
                $rootScope.commons.modal = null;
            }
        }
    }
}])

.directive('removePopoverHeader', [function () {
    return {
        restrict: "A",
        link: function (scope, iElm, iAttrs, controller) {
            document.getElementsByClassName('popup')[0].removeChild(document.getElementsByClassName('popup-head')[0]);
        }
    }
}])

.directive('setPopoverStyle', [function () {
    return {
        restrict: "A",
        scope:{
            width:"=",
            headerwidth:"="
        },
        link: function (scope, iElm, iAttrs, controller) {
            document.getElementsByClassName('popup')[0].style.width="300px";
            document.getElementsByClassName('popup-head')[0].className +="  popup-header-height";
        }
    }
}])

.directive('ionBackButton', [function () {
    return {
        restrict: "E",
        replace: false,
        template: '<button class="button ion-chevron-left button-clear button-dark" ng-click="goBack()">&nbsp;返回</button>',
        controller: function ($scope, global) {
            $scope.goBack = function () {
                global.goBack();
            }
        }
    }
}])

.directive('showBigImage', [function () {
    return {
        restrict: "E",
        scope: {
            url: '=',
            files: '='
        },
        template: "<img ng-repeat='img in files' ng-click='showBigImage(img)' ng-src='{{img.file_thumbnail_path}}' class='img-popver-pad'/>",
        controller: function ($scope, $rootScope) {
            $scope.showBigImage = function (img) {
                $scope.url = img.file_full_path;
                $rootScope.commons.bigImage = true;
            }
        }
    }
}])

.directive('resetField', ['$compile', '$timeout', function($compile, $timeout) {
    return {
        require: 'ngModel',
        scope: {},
        link: function(scope, el, attrs, ctrl) {
            // limit to input element of specific types
            var inputTypes = /text|search|tel|url|email|password/i;
            if (el[0].nodeName === "INPUT") {
                if (!inputTypes.test(attrs.type)) {
                    throw new Error("Invalid input type for resetField: " + attrs.type);
                }
            } else if (el[0].nodeName !== "TEXTAREA") {
                throw new Error("resetField is limited to input and textarea elements");
            }

            // compiled reset icon template
            var template = $compile('<i ng-show="enabled" ng-click="reset()" class="icon ion-android-close reset-field-icon"></i>')(scope);
            el.addClass("reset-field");
            el.after(template);

            scope.reset = function() {
                ctrl.$setViewValue(null);
                ctrl.$render();
                $timeout(function() {
                    el[0].focus();
                }, 0, false);
                scope.enabled = false;
            };

            el.bind('input', function() {
                scope.enabled = !ctrl.$isEmpty(el.val());
            })
            .bind('focus', function() {
                $timeout(function() { //Timeout just in case someone else is listening to focus and alters model
                    scope.enabled = !ctrl.$isEmpty(el.val());
                    scope.$apply();
                }, 0, false);
            })
            .bind('blur', function() {
                $timeout(function() {
                    scope.enabled = false;
                    scope.$apply();
                }, 0, false);
            });
        }
    };
}])