步骤分解:

第一步:给要获取的元素一个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. JMD Handy Baby 2 to Decode & Adding New BMW 525 ID46 Key

    Here OBD2TOOL share the guide on how to use JMD Handy Baby II to decode and add new keys for BMW 525 ...

  2. centos中单进程监控

    [root@k8s6 proc]# ps aux|grep -v PID|sort -rn -k +|head - root ? Ssl : : /usr/bin/dockerd root ? Ssl ...

  3. 连续子数组和的最大值plus

    package wodeshiyao; import java.io.BufferedWriter; import java.io.File; import java.io.FileInputStre ...

  4. /bin/bash: /bin/java: Is a directory 解决

    Hadoop执行 mapreduce报错 -- ::, INFO mapreduce.Job: map % reduce % -- ::, INFO mapreduce.Job: Job job_15 ...

  5. 安装Python 库软件时提示"setuptools must be installed to install from a source distribution"错误

    通过如下方式安装: sudo pip install --upgrade pip sudo pip install setuptools 如果提示pip命令没找到,需要先安装python-pip.

  6. java.security.SecureRandom源码分析 java.security.egd=file:/dev/./urandom

    SecureRandom在java各种组件中使用广泛,可以可靠的产生随机数.但在大量产生随机数的场景下,性能会较低. 这时可以使用"-Djava.security.egd=file:/dev ...

  7. Linux连不上校园网怎么办?

    原本,在我们学校我只要连上WiFi打开浏览器, 它就会自动重定向到校园网登录的界面.但是今天浏览器并没有自己打开登录页面,一直在加载.于是我想直接登录路由器,在地址栏输入192.168.0.1,结果它 ...

  8. Learning Rust - Syntax

    Rust is another compiling language that may replace the position of C/C++ in server filed. It runs f ...

  9. AJAX笔记整理

    AJAX: Asynchronous JavaScript and XML,异步的Javascirpt和Xml. Asynchronous:异步 与之对应的是 synchronous:同步,我们要知道 ...

  10. iOS逆向之TheOS

    TheOS 被设计为一个在基于 Unix 平台 (Mac OS X.IOS…) 和大多数 的Linux 平台下开发 iOS 程序的集成开发环境.说是集成开发环境,其实就是给我们准备好了一些代码模板.预 ...