Как использовать аннотирующее с угловым

Question

Я стараюсь лучше всего интегрировать аннотирующее с угловым. Библиотека Annotorius, хотя и описывается, особенно трудно отлаживать. (Посмотреть, что я имею в виду annotorious.debug.js)

До сих пор, я создал свое собственное решение с angular-annotorious (свободным MIT с открытым исходным кодом проект ПРЕДУПРЕЖДЕНИЯ:. Я сопровождающий его), который предлагает 2 директивы для тега и атрибуты случаев, также служба для доступа к объекту 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

Этот пример основан на использовании angular-annotorious annotoriousService.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я являюсь сторонником ангулярного антивоенного проекта, который является бесплатным проектом с открытым исходным кодом MIT.