Question

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

这是我的索引页面：

 <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可以正常工作。

Answer 1

这是因为我假设您使用$(function() { /* ...(multizoom init code)... */ });或$(document).ready(function() { /* ...(multizoom init code)... */初始化DOM就绪事件的多变量行为。如果是这样，那只会运行一次，并且可能在将详细信息页面加载到<div ng-view></div>之前。因此，它将无法在正在搜索的页面上找到图像，因为它尚未加载。

相反，您需要做的是在加载ng-view内容时使用event that is emitted初始化多缩放功能，如下所示：

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

这有意义吗？

作为一个小旁注，没有多个具有相同ID的元素，这不是一个好主意。相反，使用类来表示要将多变量插件应用到的图像。

jQuery在AngularJS ng-view中无法正常工作

1 个答案: