elevateZoom整合到Angular指令

文章目录

为什么要观察属性的变化？

发现把jquery插件整合到Angular中也不简单，因为Angular的中元素的值，属性都是随时变化的，而jqeury插件是不能与Angular同步的，所以会带来一些问题，比如下面

html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-controller="myAppCtrl">
<h1>Product Images</h1>
<div ng-init="src = 'testImg/image1.png';largeSrc = 'testImg/image1.jpg'">
<img ng-src="https://www.myfreax.com/elevatezoom-integrate-angular-directive/{{src}}" elevate-zoom zoom-image="{{largeSrc}}" zoom-window-fade-in="500" zoom-window-fade-out="500"
lens-fade-in="500" lens-fade-out="500"/>
</div>
</body>
<script src="https://www.myfreax.com/elevatezoom-integrate-angular-directive/js/vendor/jquery/jquery-1.11.2.js"></script>
<script src="https://www.myfreax.com/elevatezoom-integrate-angular-directive/js/vendor/underscore/underscore-min.js"></script>
<script type="text/javascript" src="https://www.myfreax.com/elevatezoom-integrate-angular-directive/js/vendor/jquery/widget/elevateZoom.js"></script>
<script type="text/javascript" src="https://www.myfreax.com/elevatezoom-integrate-angular-directive/js/vendor/angular/angular.js"></script>
</html>

javascript

angular.module('myApp', []).controller('myAppCtrl', function () {
}).directive('elevateZoom', function () {
var config = {
responsive: '@',
scrollZoom: '@',
imageCrossfade: '@',
loadingIcon: '@',
easing: '@',
easingType: '@',
easingDuration: '@',
lensSize: '@',
zoomWindowWidth: '@',
zoomWindowHeight: '@',
zoomWindowOffetx: '@',
zoomWindowOffety: '@',
zoomWindowPosition: '@',
lensFadeIn: '@',
lensFadeOut: '@',
zoomWindowFadeIn: '@',
zoomWindowFadeOut: '@',
zoomTintFadeIn: '@',
zoomTintFadeOut: '@',
borderSize: '@',
zoomLens: '@',
borderColour: '@',
lensBorder: '@',
lensShape: '@',
zoomType: '@',
containLensZoom: '@',
lensColour: '@',
lensOpacity: '@',
lenszoom: '@',
tint: '@',
tintColour: '@',
tintOpacity: '@',
gallery: '@',
cursor: '@'
};
return {
scope: config,
restrict: 'A',
link: function (scope, element, attrs) {
//观察属性发生变化时执行
attrs.$observe('zoomImage', function () {
if (!attrs.zoomImage) return;
element.attr('data-zoom-image', attrs.zoomImage);
var values = _.chain(scope).keys().filter(function (value) {
return value.indexOf('$') == -1;
}).rest().value();
var configObject = {};
for (var key in values) {
if (!_.isUndefined(scope[values[key]])) {
var temp = {};
temp[values[key]] = scope[values[key]];
_.extend(configObject, temp);
}
}
$(element).elevateZoom(configObject);
});
}
};
});