Angular.JS通过指令操作DOM的方法


Posted in Javascript onMay 10, 2017

在指令而非在控制器中操作DOM

相信大家在页面处理中,难免会遇到操作DOM的情况,在AngularJS中,对DOM的操作是在指令而非控制器中完成的。

AngularJS强调隔离的思想:把复杂的逻辑和操作放在指令或服务中,控制器作为视图和$scope之间的桥梁,仅仅用来存储数据模型。

jqLite

为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.element代表AngularJS对jQuery封装的一个子集,称为”jQuery lite”或者jqLite。jqLite不具备jQuery全部方法,详见AngularJS官方文档 angular.element。

link-function

link-function可以注册DOM监听器,同时更新DOM,更多link-function介绍参考这篇文章AngularJS Custom-Directives link-function guide

指令代码

一个引入jQuery操作DOM的指令如下:

webApp.directive("detailTopStick", ["$timeout", "$window", function ($timeout, $window) {
 return {
 restrict: "A",
 link: function (scope) {
 $timeout(function () {
 var navbar = $(".navbar-nav"); 
 var navbarOffsetTop = navbar.offset().top;
 var headerInfo = $(".header-info");
 var headerInfoMarginBottom = parseInt(headerInfo.css("margin-bottom"));
 var navbarHeight = parseInt(navbar.css("height"));
 
 angular.element($window).bind("resize", function () { // 窗口绑定resize事件
  navbar.css("width", headerInfo.width());
  navbarOffsetTop = navbar.offset().top;
  scope.$apply();
 });
 
 angular.element($window).bind("scroll", function () {
  if ($window.scrollY > navbarOffsetTop) {
  navbar.css("width", headerInfo.width());
  navbar.addClass("detail-navbar-fix");
  headerInfo.css("margin-bottom", headerInfoMarginBottom + navbarHeight);
  }
  else {
  navbar.removeClass("detail-navbar-fix");
  headerInfo.css("margin-bottom", headerInfoMarginBottom);
  }
  scope.$apply();
 });
 
 navbar.on("click", function () {
  if ($window.scrollY > navbarOffsetTop) {
  $window.scrollTo(0, navbarOffsetTop);
  }
 });
 });
 }
 };
}]);

如果未引入jquery,可以这样获取元素:angular.element(document.querySelector(“.class-name”))

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
js实现搜索栏效果
Nov 16 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
JS实现队列的先进先出功能示例
May 10 #Javascript
BootStrap的两种模态框方式
May 10 #Javascript
微信小程序之购物车功能
Sep 23 #Javascript
js canvas实现QQ拨打电话特效
May 10 #Javascript
bootstrap弹出层的多种触发方式
May 10 #Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 #Javascript
微信小程序 支付后台java实现实例
May 09 #Javascript
You might like
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
accesskey 提交
2006/06/26 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
JSON格式化输出
2014/11/10 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
python常见的格式化输出小结
2016/12/15 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
《孔子拜师》教学反思
2014/02/24 职场文书
年终考核实施方案
2014/05/26 职场文书
人事任命书怎么写
2014/06/05 职场文书
525心理活动总结
2014/07/04 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
2014年外联部工作总结
2014/11/17 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2015年科室工作总结
2015/04/10 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
会计主管竞聘书
2015/09/15 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
小学班级口号大全
2015/12/25 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
virtualenv隔离Python环境的问题解析
2022/06/21 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技
HttpClient实现表单提交上传文件
2022/08/14 Java/Android