AngularJS：如何重新编译指令上的数据更改

Question

我正在尝试在弹出窗口上实现lightSlider（http://sachinchoolur.github.io/lightslider/），当用户点击图像时可以打开该窗口。

页面上有许多图像，每个图像都可以打开带有lightSlider的弹出窗口。每次画廊的内容都不同。

问题是lightGallery用很多额外的div元素包装元素div。所以每次＆＃34;媒体＆＃34;更改后，我需要找到一种方法来删除整个元素并从模板中创建一个新元素并在其上运行lightGallery。

请帮助不多......

谢谢！

App.directive('lightGallery', function($compile) {
    return {
        restrict: 'AE',
        scope: {
            media: '='
        },
        compile: function CompilingFunction($templateElement, $templateAttributes) {
            $('.lSSlideOuter').remove();
            $templateElement.replaceWith(this.template);
            return function LinkingFunction($scope, $element, $attrs) {
                $('#imageGallery').lightSlider({
                    gallery:true,
                    item:1,
                    thumbItem:9,
                    slideMargin:0,
                    currentPagerPosition:'center'
                });
            };
        },
        template: '<ul id="imageGallery">'+
                    '<li ng-repeat="item in media.media" data-thumb="{{item.picture}}" data-src="{{item.source}}">'+
                        '<img src="{{item.source}}" />'+
                    '</li>'+
                  '</ul>'
    }
});