发现把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="{{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="js/vendor/jquery/jquery-1.11.2.js"></script>
<script src="js/vendor/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/vendor/jquery/widget/elevateZoom.js"></script>
<script type="text/javascript" src="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);
                });
            }
        };
    });

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

因为jquery插件在载入时就会马上执行，而此时zoom-image中的值可能还是空的，这是就会造成jquery插件加载回来的图片是不存在的，所以在需要zoom-image值发生变化时才能执行

在jquery插件和Angular整合时需要注意同步问题