本文主要包含angular2项目实例,angular实例,angular项目实例,angular.js实例,angular开发实例等相关知识,希望在学习及工作中可以帮助到您
Angular 常用指令
已经用了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();
});
}
}
}
};
}]);
</div>
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);
});
}
};
}]);
</div>
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();
});
}
};
}]);
</div>
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();
});
}
};
});
</div>
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();
});
}
};
});
</div>
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));
}
}
};
}]);
</div>
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));
}
}
};
}]);
</div>
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();
}
});
};
}]);
</div>
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);
}
})
};
}]);
</div>
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();
}
});
};
}]);
</div>
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();
}
});
};
}]);
</div>
10. numberOnly 输入框内容仅限数值的指令(输入内容不允许为 负值),可以设定最大值（max属性）
angular.module('my.directives').directive("numberOnly",