Javascript AngularJS：如何在指令上更改数据时重新编译

我试图在一个弹出窗口上实现lightSlider（），当用户单击图像时可以打开该窗口

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

问题是lightGallery用许多额外的div元素包装元素div。所以每次“媒体”被更改时，我都需要找到一种方法来删除整个元素，并从模板中创建一个新的元素，然后在其上运行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>'
    }
});

App.directive（'lightGallery'，函数（$compile）{
返回{
限制：“AE”，
范围：{
媒体：'='
},
编译：函数编译函数（$templateElement，$templateAttributes）{
$（'.lsslideout'）.remove（）；
$templateElement.replaceWith（this.template）；
返回函数LinkingFunction（$scope、$element、$attrs）{
$（“#图像库”）.lightSlider({
画廊：没错，
项目：1，
项目:9,，
幻灯片摘要：0，
当前页面位置：'center'
});
};
},
模板：'
'+
“
”+
''+
“
”+
“
”
}
});