步骤分解:

第一步:给要获取的元素一个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元素的更多相关文章

  1. Angular 学习笔记 (Angular 9 & ivy)

    refer : https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde47 ...

  2. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  3. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  4. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  5. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  6. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  7. angular学习笔记,很乱哈哈。

    1.鼠标悬浮出现的信息v-bind:title="message" 2.对该便签进行结果判断显示隐藏v-if=''控制台设置 app3.seen = false(消失).控制台设置 ...

  8. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  9. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

随机推荐

  1. day 5,格式化输出,for,while, break,continue,列表

    本节内容: 1,格式化输出 2,数据类型 3,for 循环 4,while 循环 5,列表 pycharm的简单使用,设置pycharm自动生成日期和计算机用户名 ctrl+d复制一行 1,格式化输出 ...

  2. NAT 模式下虚拟机安装的centos7 ping主机显示connect: Network is unreachable

    在虚拟机下安装的centos7使用的网络是NAT模式,安装成功后ping主机地址显示 Network is unreachable 解决方案: 1)使用ifconfig命令查看网卡信息 2)进入/et ...

  3. POI 导出

    package com.baoqilai.scp.service; import java.io.File; import java.io.FileOutputStream; import java. ...

  4. ssh 绕过The authenticity of host '*.*.*.*' can't be established 直接输入密码

    只需要使用命令 ssh webgate@10.129.6.237 -o "StrictHostKeyChecking no" 即可以绕过 insp_ap@inspect02:/ho ...

  5. 使用pyinstaller打包python小程序(没有使用第三方模块)

    准备: 1,xxx.py程序文件 2,自定义的图标文件:xxx.ico 图标文件应该包含常见的多分辨率格式,以便适应在不同场合显示,不能是单一图片. 你可以用专用的软件处理生成图标,不过少量的图标生产 ...

  6. hive 命令行传入参数

    azkban实现任务重跑 我们执行sql的方式是将hql文件上传到服务器本地.然后执行shell命令 hive " -f ./test_scheduler.hql 注:hive -e 是执行 ...

  7. C# 多线程 举例使用

    使用多线程的几种方式 (1)不需要传递参数,也不需要返回参数 ThreadStart是一个委托,这个委托的定义为void ThreadStart(),没有参数与返回值.   /// <summa ...

  8. 在.NET Core中三种实现“可插拔”AOP编程方式(附源码)

    一看标题肯定会联想到使用动态编织的方式实现AOP编程,不过这不是作者本文讨论的重点. 本文讨论另外三种在netcore中可实现的方式,Filter(过滤器,严格意义上它算是AOP方式),Dynamic ...

  9. docker 安装 RabbitMQ

    1.镜像中国(http://www.docker-cn.com/registry-mirror):直接使用https://hub.docker.com下载镜像比较慢,使用镜像中国加速 使用例子:$ d ...

  10. WIN 10下Mysql 5.7.21解压缩(免安装版)配置

    网上看了N多大神的东西东抄抄西抄抄,老是就不对,因为很多资料不是针对5.7这个版本的内容. 首先解压文件,比如我解压到D:\Program Files\mysql-5.7.21-winx64 第一步: ...