ディレクティブのスコープ変数が変更されるたびにカスタムangleディレクティブのテンプレートが繰り返されます

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

あなたは画像を配列にプッシュなっているか、配列がリセットを取得しているかどうかを確認するようにimgscを表示するために、あなたの$watchCollectionコールバックを変更することができ、そのコードは、このことができます

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

希望かもしれません！

Answer 2

これを行うことで、分離スコープが作成されました。

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

アレイが変更されるたびに、新しい値がimgscスコープに割り当てられます。この行を削除します。

あなたが主張する場合、単に指示自体をリフレッシュJsFiddle

UPDATE：ジャストセレクション配列に

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

ワーキングフィドルある親スコープを使用します。

私はちょうどStackOverflowを参照していますが、ui-ifは少なくとも最新バージョンのangular-uiから削除されていますが、角度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

あなたは隔離されたスコープを使用していますが、これはベストプラクティスです。使用しているアレイselectionは正確に再現されていないと思います。ここではselectionアレイを変更しています。

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