基于angularjs实现图片放大镜效果
(编辑：jimmy 日期: 2026/2/28 浏览：3 次 )
前言
一开始打算用原生的angularjs写，但是发现用原生angularjs，无论如何都不能获取里面图片的宽度和高度，因为angularjs内置的jquery方法里没有winth() 、height()方法。
最好我还是引入了jquery，在同一scope上绑定了宽度高度。下面上源码，顺便我会把里面的一些注意的点说一下。
效果图
首先说明下
1、首先使用了两个同级指令，并在两个同级指令间进行通信，同级指令间通信，非常简单，就是不要让同级的指令生成独立的scope，并且在同一个作用域下就完成了。如果指令scope没有特殊声明，那么就是父scope。指令生成的模板没有特殊意义，除非在特定的scope下编译，默认情况下，指令并不会创建新的子scope，更多的是使用父scope，也就是说，如果指令存在一个controller下，它会使用controller下的scope。
2、然后就是用$q来延迟异步获取数据，这个也可以看一下$q的用法。
源码示例
<!DOCTYPE html> <html lang="en" ng-app="magnifierAPP"> <head> <meta charset="UTF-8"> <title></title> <script src="/UploadFiles/2021-04-02/angular.min.js">总结
以上就是这篇文章的全部内容，不知道大家都学会了吗？希望这篇文章对大家的学习或者工作能带来一定帮助，如果有问题欢迎大家留言交流。
下一篇：用AngularJS的指令实现tabs切换效果