1

我想添加multizoom.js到我的 AngularJS 项目中。

这是我的索引页：

 <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 部分中，则 multizoom 可以正常工作。

4

1 回答 1

3

这是因为我假设您正在初始化 DOM 就绪事件上的多缩放行为，使用$(function() { /* ...(multizoom init code)... */ });or $(document).ready(function() { /* ...(multizoom init code)... */。如果是这样，它将只运行一次，并且可能在详细信息页面加载到<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 回答