angular学习笔记-angular中怎么获取dom元素
步骤分解:
第一步:给要获取的元素一个ng-model变量,并且绑定事件啦!
<div class="home" ng-model="dirName" ng-mouseenter="switchImage($event,dirName)"></div> //给要获取的元素一个ng-model变量
第二步:在controller中利用$event.target获取dom元素即可!
$scope.switchImage = function($event, value) {
$($event.target).on("mouseenter mouseleave",function(e) {
var w = $(this).width(); // 得到盒子宽度
var h = $(this).height();// 得到盒子高度
var x = (e.pageX - this.offsetLeft - (w / )) * (w > h ? (h / w) : );
// 获取x值
var y = (e.pageY - this.offsetTop - (h / )) * (h > w ? (w / h) : );
// 获取y值
var direction = Math.round((((Math.atan2(y, x) * ( / Math.PI)) + ) / ) + ) % ;
//direction的值为“0,1,2,3”分别对应着“上,右,下,左”
// 将点的坐标对应的弧度值换算成角度度数值
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseenter' && direction == ){
$(this).find('.profil-photo').html(dirName[direction]+'离开');
}else{
$(this).find('.profil-photo').html(dirName[direction]+'离开');
}
});
}
angular学习笔记-angular中怎么获取dom元素的更多相关文章
- Angular 学习笔记 (Angular 9 & ivy)
refer : https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde47 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(1)-概述
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...
- angular学习笔记,很乱哈哈。
1.鼠标悬浮出现的信息v-bind:title="message" 2.对该便签进行结果判断显示隐藏v-if=''控制台设置 app3.seen = false(消失).控制台设置 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
随机推荐
- TCP编程
Socket是网络编程的一个抽象概念,通常我们用一个Socket表示“打开了一个网络连接”,而打开一个Socket需要知道目标计算机的IP地址和端口号,在指定协议类型即可. 客户端 大多数连接就是考的 ...
- centos7 mysql的安装与配置
用yum直接安装,不用更改配置 1. #yum install mysql #yum install mysql-server #yum install mysql-devel yum运行报错的化有可 ...
- SpringMvc在返回数据之前进行统一处理
这里其实有多种解决方案 如果你不需要获取request对象 可以采用aop(环绕通知)的方式来统一修改 如果你需要获取request对象,那么就需要采用下面的方式 0自己定义一个注解,内容如下 @Ta ...
- 基于Zxing的二维码的二维码扫描之横屏扫描
最近项目条码扫描要改为横屏,网上所搜了一下,然后发现我写的需要改动几行代码就可以了,还是很给力的. 如未查看之前的代码,请移步: 基于Zxing的二维码生成和二维码扫描 修改下面写代码就可以实现横屏条 ...
- 20175316盛茂淞 2018-2019-2 《Java程序设计》第5周学习总结
20175316盛茂淞 2018-2019-2 <Java程序设计>第5周学习总结 教材学习内容总结 第六章 接口与实现. 何谓接口 接口:书上没有明确地给出接口的定义,我理解的接口就是一 ...
- Pattern Design - Strategy Pattern
If you can disassemble code and you want to apply one method of an object in another object that t ...
- 完整的SOPC开发流程体验
课程目标:学习并掌握完整的SOPC开发流程. 开发环境:Quartus15.1 学习内容:1.使用QSYS工具建立能够运行流水灯项目的NIOS II处理器系统 2.在quartus ii中添加NIOS ...
- Docker基础-使用Dockerfile创建镜像
1.基本结构 Dockerfile由一行行命令语句组成,并支持以#开头的注释行.例如: # This dockerfile uses the ubuntu image # VERSION 2 - ED ...
- 使用命令行管理maven项目
创建maven java项目 自己创建一个文件夹,进入cmd,(shift+鼠标右键)这样创建的maven[java]项目就在该文件夹下了. 打开cmd第一种方式 打开cmd第二种方式 命令:mvn ...
- WCF双工通信单工通信
1.单工模式 单向通信,指通信只有一个方向进行,即从客户端流向服务,服务不会发送响应,而客户端也不会期望会有响应.这种情况下,客户端发送消息,然后继续执行 运行后报错: 2.双工模式 双工模式的特点是 ...