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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
node.js实现微信开发之获取用户授权
Mar 18 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 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基础知识:控制结构
2006/12/13 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
JScript的条件编译
2007/05/29 Javascript
js中的string.format函数代码
2020/08/11 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
学习Vue组件实例
2018/04/28 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python Django路径配置实现过程解析
2020/11/05 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
strstr()的简单实现
2013/09/26 面试题
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
居住证明范文
2015/06/17 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书