Angularjs 每次更改指令的范围变量时，自定义角度指令的模板都会重复

我有一个绑定到自定义指令属性的数组。此属性值在“我的模板”部件中使用。每次数组更改时，模板都会运行，对吗？。此模板创建一个div元素。每次更改数组时，模板都会创建div元素，而不会删除前一个元素。有没有办法在重新创建之前删除上一个

app.directive("imgslidedynamic",function()  
{     
    return{
            restrict:'EA',
            scope:{
                    imgsc: "=imgsc" ,
                 },

            template:   '<div class="rslides">'+
                          '<div ng-repeat="everyimg in imgsc">'+
                            '<img ng-src="{{everyimg}}"/>'+
                          '</div>'+
                        '</div>'
            ,       

            link:   function(scope,element,attrs)
                    {
                        scope.$watchCollection('imgsc',function(){  
                                    console.log("imgsc changed!");
                        });                         
                    } 
        };
    });

app.directive（“imgslidedynamic”，函数（）
{     
返回{
限制：'EA'，
范围：{
imgsc:“=imgsc”，
},
模板：“”+
''+
''+
''+
''
,       
链接：函数（范围、元素、属性）
{
作用域.$watchCollection（'imgsc'，function（）{
log（“imgsc已更改！”）；
});                         
} 
};
});

指令调用

 <imgslidedynamic imgsc="selection"></imgslidedynamic>

---

这里的“选择”是一个动态数组。

您能否更改您的

$watchCollection

回调以显示

imgsc

，以验证图像是否被推送到数组中或数组是否被重置，从而可以删除代码

 scope.$watchCollection('imgsc',function(imgsc){  
       console.log(imgsc + "imgsc changed!");
 }); 

---

希望这有帮助

您能否更改您的

$watchCollection

回调以显示

imgsc

，以验证图像是否被推送到阵列或阵列是否被重置，从而可以删除代码

 scope.$watchCollection('imgsc',function(imgsc){  
       console.log(imgsc + "imgsc changed!");
 }); 

---

希望这有帮助

通过这样做，您已经创建了一个独立的作用域

scope:{
   imgsc: "=imgsc" ,
 },

每次更改数组时，都会将新值分配给imgsc范围。拆下这条线。只需使用父范围，即选择数组

app.directive("imgslidedynamic",function()  
{     
    return{
            restrict:'EA',
            template:   '<div class="rslides">'+
                          '<div ng-repeat="everyimg in selection">'+
                            '<img ng-src="{{everyimg}}"/>'+
                          '</div>'+
                        '</div>'
            ,       

            link:   function(scope,element,attrs)
                    {
                        scope.$watchCollection('imgsc',function(){  
                                    console.log("imgsc changed!");
                        });                         
                    } 
        };
    });

---

这样，如果选择更改或短暂设置为null，则重新应用。这将删除html指令，然后将其转移回DOM中，从而使其再次评估该指令。

通过这样做，您已经创建了一个独立的作用域

scope:{
   imgsc: "=imgsc" ,
 },

每次更改数组时，都会将新值分配给imgsc范围。拆下这条线。只需使用父范围，即选择数组

app.directive("imgslidedynamic",function()  
{     
    return{
            restrict:'EA',
            template:   '<div class="rslides">'+
                          '<div ng-repeat="everyimg in selection">'+
                            '<img ng-src="{{everyimg}}"/>'+
                          '</div>'+
                        '</div>'
            ,       

            link:   function(scope,element,attrs)
                    {
                        scope.$watchCollection('imgsc',function(){  
                                    console.log("imgsc changed!");
                        });                         
                    } 
        };
    });

---

这样，如果选择更改或短暂设置为null，则重新应用。这将删除html指令，然后将其转移回DOM，使其再次评估该指令。

您使用的是隔离作用域，这是最佳实践之一，我认为您使用的

选择

数组没有正确地重新创建，这里是正在工作的plunker，我正在更改

选择

数组，它正在按预期工作

---

您使用的是隔离作用域，这是最佳实践之一，我认为您使用的

选择

数组没有正确地重新创建，这里是正在工作的plunker，我正在更改

选择

数组，它正在按预期工作

---

我检查了这些值，它们被正确地更改了。它没有重置。我检查了值，它们被正确地更改了。它没有重置。没有。我的选择数组很好。我通过在watch内的link函数中打印“imgsc”进行了检查。这是我的建议：。只需添加这4个图像文件并运行代码。当你添加或删除代码时，我的代码上的动画会很奇怪。你会注意到这些变化。Im sry plunk不允许img文件如此sry。没有我的选择数组是可以的。我通过在watch内的link函数中打印“imgsc”进行了检查。这是我的建议：。只需添加这4个图像文件并运行代码。当你添加或删除我的代码时，我的代码上的动画会很奇怪。你会注意到这些变化。Im sry plunk不允许img文件如此sry。但是对我来说，一个独立的作用域是必要的。因为我需要在整个站点上使用此指令。！有没有其他方法可以解决这个问题？我认为ui应该接受布尔值而不是数组。参考最新答案和工作指南。使用ng if，因为angular v1.5及以上版本不推荐使用ui if，但我需要一个单独的范围。因为我需要在整个站点使用此指令。！有没有其他方法可以解决这个问题？我认为ui应该接受布尔值而不是数组。参考最新答案和工作小提琴。使用ng if，因为ui if在angular v1.5及更高版本中被弃用