0

Smoothzoom 画像ズーム プラグインに jQuery クリック バインドを使用しています。ただし、angularjs で実装するとバインディングが機能しません。私は角度とjQueryが初めてです。だから助けてください。

これは私のズーム用のjQuery関数です。実際には、href から image_url を取得しようとしています。

jQuery(function($){
    $('.zoom_thumbnails').find('li a').each(function (){
        $(this).bind('click', {src: $(this).attr('href')}, function (e){
              $('#zoom_container').smoothZoom('destroy').css('background-image', 'url(css/zoom_assets/preloader.gif)').smoothZoom({
                     image_url: e.data.src,
                      width: '100%',
                      height: '300%',
                   });
               return false;
           });
       }).eq(0).trigger('click');
     });

私のhtmlコードは以下です。

<div id="zoom_container"></div>
<ul class="zoom_thumbnails">
    <div  ng-repeat="image in zoomImages">
        <li><a href={{image.img}} data-size="500,400">
            <img src={{image.img}} style="height: 15%">
            </a></li>
      </div>
</ul>

画像が配列 zoomImage に格納されているコントローラーを使用しています。画像の URL をハードコードしようとすると、正常に動作します。しかし、ng-repeat を使用している間、バインディングは jQuery では発生しません。この問題を解決するのを手伝ってください。コントローラーだけでなく、htmlページ内にjQuery関数を配置してみました。

4

2 に答える 2

3

jQuery を $('.zoom_thumbnails') に使用する前に、ng-repeat が完了するまで待つ必要があります。

これを行うためのディレクティブを次に示します ( http://jsfiddle.net/tQw6w/ )。true の場合、指定された関数を呼び出します。

.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // all are rendered
            scope.$eval(attrs.repeatDone);
        }
    }
})

そしてhtml：

<ul>
    <li ng-repeat="feed in feedList" repeat-done="layoutDone()" ng-cloak>
        <a href="{{feed}}" title="view at {{feed | hostName}}" data-toggle="tooltip">{{feed | strip_http}}</a>
    </li>
</ul>

そしてコントローラーの機能：

$scope.layoutDone = function() {
    $timeout(function() { $('a[data-toggle="tooltip"]').tooltip(); }, 0); // wait...
}

フィドルのツールチップやサムネイルの初期化など、DOM 操作を行う前に interval=0 の $timeout が必要であることがわかりました。

ところで、jQuery は Angular とうまく連携します。jQuery スクリプト タグが Angular スクリプト タグの前にあることを確認してください。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
于 2013-04-22T08:13:38.253 に答える
2

あなたのスムーズズーム機能については知りませんが、コンテナの背景画像をサムネイル画像から切り替えるためのディレクティブの例については、このデモをご覧ください。

リンク:プランカーのデモ

于 2013-04-19T18:27:02.050 に答える