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插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 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正则提取图片地址
2014/03/27 PHP
PHP 快速排序算法详解
2014/11/10 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python线程池threadpool实现篇
2018/04/27 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python 控制终端输出文字的实例
2019/07/12 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
电大自我鉴定
2013/10/27 职场文书
应届生如何写自荐信
2014/01/05 职场文书
调解员先进事迹材料
2014/02/07 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
拾金不昧感谢信
2015/01/21 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python