Angular 比较常用的指令

最新推荐文章于 2024-09-07 09:03:16 发布

XINGXUEXX

最新推荐文章于 2024-09-07 09:03:16 发布

阅读量2.1k

点赞数

分类专栏： angularJS

angularJS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

特别好用的指令

来自 http://techlogs.cn/angular-bi-jiao-chang-yong-de-zhi-ling/

已经用了angular很久积累了一些很实用的指令，需要的话直接拿走用，有问题大家一起交流

1.focus时，input:text内容全选


angular.module('my.directives').directive('autoselect', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (element.is("input") && attr.type === "text") {
                var selected = false;
                var time = parseInt(attr["autoselect"]);
                element.bind("mouseup", function (e) {
                    if (selected) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                    selected = false;
                });
                if (time > 0) {
                    element.bind("focus", function (event) {
                        setTimeout(function () {
                            selected = true;
                            event.target.select();
                        }, time);
                    });
                } else {
                    element.bind("focus", function (event) {
                        selected = true;
                        event.target.select();
                    });

                }
            }
        }
    };
}]);

2.clickOutside指令，外部点击时触发,click-outside="func()" func为自己指定的方法，一般为关闭当前层的方法，inside-id="" 点击指定id的输入框时，当前层不关闭


angular.module('my.directives').directive('clickOutside', ['$document', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $(element).bind('mousedown', function (e) {
                e.preventDefault();
                e.stopPropagation();
            });

            $("#" + attrs["insideId"]).bind('mousedown', function (e) {
                e.stopPropagation();
            });

            $("#" + attrs["insideId"]).bind('blur', function (e) {
                setTimeout(function () {
                    scope.$apply(attrs.clickOutside);
                });
            });

            $document.bind('mousedown', function () {
                scope.$apply(attrs.clickOutside);
            });
        }
    };
}]);

3.clickInside指令，内部点击时触发


angular.module('my.directives').directive('clickInside', ['$document', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) {
            $(element).bind('focus click', function (e) {
                scope.$apply(attrs.clickInside);
                e.stopPropagation();
            });
        }
    };
}]);

4.scrollInside 指令，内部滚动时触发


angular.module('my.directives').directive('scrollInside', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) {
            $(element).bind('scroll', function (e) {
                scope.$apply(attrs.scrollInside);
                e.stopPropagation();
            });
        }
    };
});

5. bindKeyBoardEvent指令，内部获得焦点或者点击时触发


angular.module('my.directives').directive('bindKeyBoardEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) {
            $(element).bind('focus click', function (e) {
                scope.$apply(attrs.bindKeyBoardEvent);
                e.stopPropagation();
            });
        }
    };
});

6. myDraggable 使元素可拖动


angular.module('my.directives').directive('myDraggable', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (attr["modal"] !== undefined) {
                scope.$watch(attr["modal"], function (newValue) {
                    if (newValue) {
                        setTimeout(function () {
                            $(".modal").draggable({handle: ".modal-header"});
                        }, 100);
                    } else {
                        $(".modal").attr("style", "");
                    }
                }, true);
                $(window).resize(function () {
                    $(".modal").attr("style", "");
                });
            } else {
                element.draggable($parse(attr["hrDraggable"])(scope));
            }
        }
    };
}]);

6.myResizable 使元素可拖拽改变尺寸大小


angular.module('my.directives').directive('myResizable', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (attr["modal"] !== undefined) {
                scope.$watch(attr["modal"], function (newValue) {
                    if (newValue) {
                        setTimeout(function () {
                            $(".modal").resizable({handles: "e, w"});
                        }, 100);
                    }
                }, true);
            } else {
                element.resizable($parse(attr["hrResizable"])(scope));
            }
        }
    };
}]);

6. conditionFocus 作为一个元素的属性存在：如果监听的表达式值为true，则将焦点放到本元素上。


angular.module('my.directives').directive("conditionFocus", [function () {
    return function (scope, element, attrs) {
        var dereg = scope.$watch(attrs.conditionFocus, function (newValue) {
            if (newValue) {
                element.focus();
            }
        });
        element.bind("$destroy", function () {
            if (dereg) {
                dereg();
            }
        });
    };
}]);

7.scrollToHide 滚动到顶部的时候触发


angular.module('my.directives').directive("scrollToHide", [function () {
    return function (scope, element, attrs) {
       var height= parseFloat(attrs.maxHeight)
        $(window).scroll(function(){
            var scrollTop= document.body.scrollTop||document.documentElement.scrollTop;
             if(scrollTop>height){
                 $parse(attrs.ngShow).assign(scope, false);
             }else{
                 $parse(attrs.ngShow).assign(scope, true);
             }


        })

    };
}]);

8.resetToZero 作为一个元素的属性存在：如果监听的表达式值为true，则将本元素中所绑定的ngModel值设为0


angular.module('my.directives').directive("resetToZero", ["$parse", function ($parse) {
    return function (scope, element, attrs) {
        var dereg = scope.$watch(attrs.resetToZero, function (newValue) {
            if (newValue) {
                if (attrs.ngModel) {
                    $parse(attrs.ngModel).assign(scope, 0);
                }
            }
        });
        element.bind("$destroy", function () {
            if (dereg) {
                dereg();
            }
        });
    };
}]);

9.resetToEmptyString 作为一个元素的属性存在：如果监听的表达式值为true，则将本元素中所绑定的ngModel值设为空字符串。


angular.module('my.directives').directive("resetToEmptyString", ["$parse", function ($parse) {
    return function (scope, element, attrs) {
        var dereg = scope.$watch(attrs.resetToEmptyString, function (newValue) {
            if (newValue) {
                if (attrs.ngModel) {
                    var _getter = $parse(attrs.ngModel);
                    if (_getter(scope)) {
                        _getter.assign(scope, "");
                    } else {
                        _getter.assign(scope.$parent, "");
                    }
                }
            }
        });
        element.bind("$destroy", function () {
            if (dereg) {
                dereg();
            }
        });
    };
}]);

10. numberOnly 输入框内容仅限数值的指令(输入内容不允许为负值),可以设定最大值（max属性）


angular.module('my.directives').directive("numberOnly", ["$parse", function ($parse) {
    return function (scope, element, attrs) {
        element.bind("keyup", function () {
            if(event.keyCode==37||event.keyCode== 39){
                return false;
            }
            var val = element.val().replace(/[^\d.]/g, '');
            if(attrs.max){
                if(val>parseInt(attrs.max)){
                    val=attrs.max;
                }
            }
            element.val(val);
            if (attrs.ngModel) {
                $parse(attrs.ngModel).assign(scope, val);
            }
            return false;
        });
        element.bind("afterpaste", function () {
            var val = element.val().replace(/[^\d.]/g, '');
            if(attrs.max){
                if(val>parseInt(attrs.max)){
                    val=attrs.max;
                }
            }
            element.val(val);
            if (attrs.ngModel) {
                $parse(attrs.ngModel).assign(scope, val);
            }
            return false;
        });
    };
}]);

11. upperCaseOnly 输入框自动转换成大写


angular.module('my.directives').directive("upperCaseOnly", ["$parse", function ($parse) {
    return function (scope, element, attrs) {
        element.bind("keyup", function () {
            var val = element.val().toUpperCase();
            element.val(val);
            if (attrs.ngModel) {
                $parse(attrs.ngModel).assign(scope, val);
            }
            return false;
        });
        element.bind("afterpaste", function () {
            var val =element.val().toUpperCase();
            element.val(val);
            if (attrs.ngModel) {
                $parse(attrs.ngModel).assign(scope, val);
            }
            return false;
        });
    };
}]);

12. noSpecialString 输入框内容不能为特殊字符


angular.module('my.directives').directive("noSpecialString", ["$parse", function ($parse) {
    return function (scope, element, attrs) {
        element.bind("keyup", function () {
            var val = element.val().replace(/[\W]/g, '');
            element.val(val);
            if (attrs.ngModel) {
                $parse(attrs.ngModel).assign(scope, val);
            }
            return false;
        });
        element.bind("afterpaste", function () {
            var val = element.val().replace(/[^\d]/g, '');
            element.val(val);
            if (attrs.ngModel) {
                $parse(attrs.ngModel).assign(scope, val);
            }
            return false;
        });
    };
}]);

13. round2bit 输入框失去焦点保留两位小数


angular.module('my.directives').directive("round2bit", ['$parse', '$filter', function ($parse, $filter) {
    return function ($scope, element, attrs) {
        element.blur(function () {
            if (attrs.ngModel) {
                var _getter = $parse(attrs.ngModel);
                var _numberStr2Round = (_getter($scope) || 0);
                _getter.assign($scope, $filter('number')(_numberStr2Round, 2).split(",").join(""));
                $scope.$apply();
            }
        });
    };
}]);

14.SelfHeight dom编译期设置元素高度，可以接受数字或者表达式


angular.module('hr.directives').directive('SelfHeight', ['$timeout', function ($timeout) {
    function _resizeElement(element, SelfHeight) {
        element.height((typeof SelfHeight === "number") ? SelfHeight : eval(SelfHeight));
    };

    return {
        priority: 1000,
        link: function (scope, element, attrs) {
            var hrSelfHeight = attrs["SelfHeight"];
            var on = attrs["on"];
            if (on) {
                $(window).resize(function () {
                    _resizeElement(element, scope.$eval(SelfHeight));
                });
                scope.$watch(on, function () {
                    $timeout(function () {
                        _resizeElement(element, scope.$eval(SelfHeight));
                    }, 100);
                }, true);
            } else {
                $(window).resize(function () {
                    _resizeElement(element, SelfHeight);
                });
                _resizeElement(element, SelfHeight);
            }
        }
    };
}]);