步骤分解:

第一步:给要获取的元素一个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. java【基础】正则表达式

    1 字符串判断 java的正则使用的是Pattern以及Matcher来配合使用的. 如果只是用来判断输入的字符串是否符合格式,推荐使用Matcher的matches方法. public static ...

  2. etcd-v2第四集

    coreos把etcd的image放到自家的quay.io,而不是hub.docker,或许是竞争关系,但国内下载quay.io容器极难,反正shadowsocks是下载不了. 幸好有热心爱好者搬运到 ...

  3. 除了Office和wps,还有什么办公软件比较好用?

    一.不能没有的pdf软件 以下介绍的是PDF(Portable Document Format)常用的阅读.编撰以及其他工具.阅读工具1.Adobe AcrobatReader中文版应用平台:Wind ...

  4. mysql sql_mode=only_full_group_by错误解析

    实测,解决问题; 1.错误提示: 2.检查参数设置: 3.mysql的配置文件my.cnf里面可以修改, 但是,改完以后,你检查所有的参数设置都是对的,就是运行不了.怎么办?怎么办? 4.如果还是不行 ...

  5. Jmeter小技巧以及问题集合

    一.JDBC Request与BeanShell PostProcessor的结合使用 JDBCRequest部分   BeanShell PostProcessor配置项 二.if控制器的用法 三. ...

  6. Unity3D使用EasyMovieTexture插件播放视频

    Unity3D对于视频的播放兼容个人感觉很差劲,之前写过一篇使用Unity3D自己自带的一些功能去播放视频,链接如下: http://www.cnblogs.com/xiaoyulong/p/8627 ...

  7. 基于UML的文献管理系统建模研究

    一.基本信息 标题:基于UML的文献管理系统建模研究 时间:2016 出版源:信息与电脑(理论版) 领域分类:UML:文献管理系统:系统建模: 二.研究背景 问题定义:图书的管理与规划 难点:系统和管 ...

  8. windows基于vs2017的opencv安装

    1.opencv下载与安装 1.下载地址:官网下载地址https://opencv.org/releases.html   opencv为开源软件,可直接在官网下载最新版本. 2.软件安装:openc ...

  9. System.exit(int status)

    这个方法是用来结束当前正在运行中的Java虚拟机 System.exit(0); /* 实参为0表示正常终止 */ System.exit(1); /* 实参为非0表示异常终止 */

  10. Linux Ubuntu部署web环境及项目tomcat+jdk+mysql

    1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上传到服务器 或者直接通过linux命令 下在wget文件的下载地址 例如: wg ...