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

Question

我有一个数组绑定到自定义指令的属性。我的模板部分使用了该属性值。每次数组更改时都会运行模板，对吧？该模板创建一个 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!");
                        });                         
                    } 
        };
    });

指令调用

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

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

Answer 1

您正在使用隔离范围，这是最佳实践之一，我认为您正在使用的

selection

数组未正确重新创建，这是工作中的 plunker，我正在更改

selection

数组，它正在按预期工作.

https://plnkr.co/edit/HpLkA2kREKbhqH1RJQet?p=preview

Answer 2

通过执行此操作，您已经创建了一个隔离范围。

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!");
                        });                         
                    } 
        };
    });

工作小提琴：JsFiddle

更新

如果您坚持，只需刷新指令本身即可。

我只是参考StackOverflow，它说 ui-if 至少从最新版本的 Angular-UI 中删除，但从 Angular 1.1.5 开始，你内置了 ng-if 。

然后你可以使用 ng-if 。

查看

<imgslidedynamic ng-if="selectionChange" imgsc="selection"></imgslidedynamic>

Ctrl

var app = angular.module('app', []);

app.controller("Ctrl", function ($scope) {
     $scope.selectionChange = false;
     $scope.selection = [ 'a', 'b', 'c', 'd', 'e'];

     $scope.changeSelection = function () {
      $scope.selection = [ 'c', 'd', 'e'];
     }

     $scope.$watchCollection('selection', function (newVal, oldVal) {
        // console.log(newVal + ' | ' + oldVal);
         if (newVal !== oldVal) {
            console.log('Enter');
            $scope.selectionChange = true;
         } else {
             $scope.selectionChange = false;
         }
     });
});

这样，如果选择发生更改或短暂将其设置为 null，则重新应用。这将删除 html 指令，然后将其嵌入到 DOM 中，导致它再次评估该指令。

Answer 3

更改您的

$watchCollection

回调以显示

imgsc

，以验证图像是否已推送到数组或数组是否正在重置，因此代码可以是

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