Angular 常用指令实例总结整理

Angular 常用指令

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

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

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的输入框时，当前层不关闭

  $("#" + 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指令，内部点击时触发

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

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

6. myDraggable 使元素可拖动

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

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

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

height){ $parse(attrs.ngShow).assign(scope,false); }else{ $parse(attrs.ngShow).assign(scope,true); }

})

};
}]);

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

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

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

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,val); } return false; }); }; }]);

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

SEOnly",function () { var val = element.val().toUpperCase(); element.val(val); if (attrs.ngModel) { $parse(attrs.ngModel).assign(scope,function () { var val =element.val().toUpperCase(); element.val(val); if (attrs.ngModel) { $parse(attrs.ngModel).assign(scope,val); } return false; }); }; }]);

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

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

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

return {
priority: 1000,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);
}
}
};
}]);

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

原文链接：https://www.f2er.com/js/43604.html

Angular 常用指令实例总结整理