angularjs2使用magnifier图片展示插件

最新推荐文章于 2020-03-02 15:05:13 发布

原创最新推荐文章于 2020-03-02 15:05:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

5 篇文章

订阅专栏

本文记录了一次图片浏览放大插件开发过程中遇到的问题及解决思路。主要讲述了如何定位问题出现在变量复用导致的冲突，并提供了相应的解决方案。

因为业务需要做一个可以浏览放大图片的插件

按照常规套路：

var   magnifierConfig :any= {
  magnifier:"magnifier1",//最外层的大容器
  width : 500,//承载容器宽
  height : 500,//承载容器高
  moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
  zoom : 5//缩放比例
};

var _magnifier = magnifier(magnifierConfig);

引用js，css，调用初始化方法，传入参数————前端功能正常使用，哈哈，很流畅嘛。

刚要和同时炫耀，发现点到其他页面再点回来的时候图片就不能正常显示了。果然有坑..

debug发现原来是：

var _magnifier = magnifier(magnifierConfig);
这一步执行的时候第一次加载的时候可以正常调用插件里的magnifier方法，但是到第二次的时候magnifier就变成了一个div？？？，这是为啥？原来是
var   magnifierConfig :any= {
  magnifier:"magnifier1",//最外层的大容器
  width : 500,//承载容器宽
  height : 500,//承载容器高
  moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
  zoom : 5//缩放比例
};
这一步里的magnifier变量搞的鬼，第二次点击进入该页面的时候angularjs2的变量还存在，