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 相关文章推荐
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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面向对象
2012/02/22 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP微信分享开发详解
2017/01/14 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Python  Django 母版和继承解析
2019/08/09 Python
python 中xpath爬虫实例详解
2019/08/26 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
留学自荐信
2013/10/10 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
学校就业保障协议书
2019/06/24 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android