1

multizoom.jsAngularJS プロジェクトに追加したいと考えています。

これは私のインデックスページです:

 <body>
   <img id="zoom" ng-src="example.jpg" class="example ng-class">
   <div ng-view> </div>
 </body>

これは詳細ページです:

<img id="zoom" ng-src="example.jpg" class="example ng-class">

私の問題は、jQuery multizoom プラグインが AngularJS の ng-view 部分にある画像をズームしないことです。

画像が ng-view 部分にない場合、マルチズームは正常に機能します。

4

1 に答える 1

3

$(function() { /* ...(multizoom init code)... */ });これは、またはを使用して、DOM Ready イベントでマルチズームの動作を初期化していると推測されるためです$(document).ready(function() { /* ...(multizoom init code)... */。その場合、それは 1 回だけ実行され、おそらく詳細ページが に読み込まれる前に実行されます<div ng-view></div>。その結果、まだロードされていないため、検索しているページで画像を見つけることができません。

ng-view代わりに、コンテンツが読み込まれるたびに、次のように、発行されるイベントを使用して、マルチズーム機能を初期化する必要があります。

// (inside some function with $rootScope available)
$rootScope.$on('$viewContentLoaded', function() {
    // ... (multiview init code here) ...
});

それは理にかなっていますか？

補足として、同じ ID を持つ複数の要素を持たないでください。それは良い考えではありません。代わりに、クラスを使用して、マルチズーム プラグインを適用する画像を示します。

于 2013-03-28T05:08:29.373 に答える