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 ...
随机推荐
- 什么叫做API?看完你就理解了
阅读编程资料时经常会看到API这个名词,网上各种高大上的解释估计放倒了一批初学者.初学者看到下面这一段话可能就有点头痛了. API(Application Programming Interface, ...
- 初始Spring mvc
转自:http://elf8848.iteye.com/blog/875830很棒的一篇博客,想了解SpringMvc的入门选手可以去看看. 一,核心类与接口: DispatcherServlet - ...
- MySQL数据查询之多表查询
多表查询 多表联合查询 #创建部门 CREATE TABLE IF NOT EXISTS dept ( did int not null auto_increment PRIMARY KEY, dna ...
- 查看windows上次开机时间
首先在电脑上找的[计算机]图标,点击鼠标右键弹出下拉菜单,在下拉菜单里找到[管理]选项 点击下拉菜单里的[管理]选项,弹出计算机管理界面,在左侧菜单栏里的系统工具里可以看到[事件查看器]菜单 点击[时 ...
- zeromq学习记录(六)C语言示例
考虑到官方的示例c语言是最多的 官方未使用C++语言演示的例子就使用VC编译C语言例子 记录在此 /************************************************** ...
- Gym - 100781G-Goblin Garden Guards
题目链接:https://nanti.jisuanke.com/t/28882 解题思路:单纯的判断点是否在圆内,一一遍历圆外切正方形内的点即可,注意,该题要建个结构体数组存每个地精的位置,再bool ...
- 解决win10系统无法安装.NET Framework 3.5
方法1:“我的电脑”,单击右键选择“管理” 在打开的“计算机管理”窗口中依路径“服务和应用程序—服务”打开,在列表中找到“Windows Update”并双击打开. 启动类型:自动. 服务状态下面点击 ...
- ubuntu中给python3安装opencv
一.安装相关工具包******注意:以下3,4,5,6为可选项,根据需求安装******1.更新库 sudo apt-get update sudo apt-get upgrade 2.安装从源码构建 ...
- C/C++ 的宏中#和##的作用和展开
C/C++ 的宏中: (1) # 的功能是将其后面的宏参数进行字符串化操作,简单说就是在对它所引用的宏变量通过替换后在其左右各加上一个双引号. 也就是说: #define __TO_STRING_IM ...
- Django Template 进阶
回顾: Variables {{ var }} {{ dict.key }} {{ var.attr }} {{ var.method }} {{ varindex }} Filter {{ list ...