如何在angular中使用注解

Question

我正在尝试最好地将annotorious与angular集成在一起。虽然描述了Annotorius库，但它特别难以调试。(请看我在annotorious.debug.js上的意思)

到目前为止，我使用angular-annotorious (免费的麻省理工学院开源项目免责声明:我是它的维护者)创建了自己的解决方案，它为标记和属性情况提供了两个指令，还提供了一个访问anno对象的服务。

我面临着动态内容的问题，比如滑块。(请注意，我确实知道对于ng-src图像，由于img src周期，可能需要特殊处理)

带有唯一URL的带注释的图像一旦在DOM树中重新创建，如果我们调用

anno.makeAnnotatable(img)

要重现它，请参阅colorbox example (colorbox是一个免费的开源模式库)

如何集成/注释可能重新出现的动态内容，有什么有趣的想法吗？

Answer 1

我找到了解决方案，而不是做一个“关闭”注释，我们只需调用onLoad和onCleanup事件中的重置函数，这对于colorbox或fancybox等动态内容至关重要。

与colorbox动态集成的代码如下所示：

$scope.annotateColorbox03 = {
    rel: 'img-group-01',
    slideshow: false,
    open: false,
    onComplete: function () {
        console.log('03-complete');
        var photo = colorboxService.getCurrentPhoto();
        if (photo.src) {
            console.log('annotateColorbox03 ' + photo.src);
            annotoriousService.makeAnnotatable(photo);
            var annotations = annotoriousService.getAnnotations(photo.src);
            console.log(annotations);
            if (annotations && annotations.length > 0) {
                annotoriousService.showAnnotations(photo.src);
                colorboxService.resize();
            }

        }
    },
    onLoad: function () {
        console.log('03-onLoad');
        annotatableImage();
    },
    onCleanup: function () {
        console.log('03-cleanup');
        annotatableImage();
    }
};

function annotatableImage() {
    var photo = colorboxService.getCurrentPhoto();
    if (photo && photo.src) {
        //required
        annotoriousService.reset(photo.src);
    }
}

工作示例现在位于：Annotorious in Colorbox Gallery

此示例依赖于使用annotoriousService的angular-annotorious。

免责声明:我是angular-annotorious的维护者，这是一个免费的麻省理工学院开源项目。