ディレクティブ内のオブジェクトの更新された配列の使用

Question

ビュー内では、コントローラのオブジェクトの配列をループするディレクティブの中でng-repeatを使用しています。この段階では、配列内のオブジェクトは値の変化を受けます。ビューを変更して同じディレクティブの新しいインスタンスを作成すると、オブジェクトの配列をもう一度ループしたいが、今回はオブジェクトの更新された配列をループする。

最初のビューでオブジェクトを変更し、2番目のビューで同じオブジェクトの配列を渡すと、そのディレクティブは更新された配列ではなく最初の配列を使用します。私が試みたのは、配列の変更を見て、それは変更を参照していますが、それはまだ初期配列を使用するディレクティブの2番目のインスタンスの間です。

誰かが何が起こっているのか説明できますか？これをどのように解決できますか？

Answer 1

単純な親子関係ディレクティブを持つことができます。このディレクティブは、ディレクティブがコントローラのスコープに追加されたビューにアクセスできるようにします。コントローラのスコープ変数に指令&の配列でng-repeatを持つことができます。次に、双方向のデータバインディングによって値が自動的に同期されます。あなたは私が作成した次のようなパンクを続けることができます。

コントローラ&ディレクティブ間でどのようにデータを共有しているかによって異なります。 2つのデータバインディングを使用すると、イベントの処理やディレクティブでの$ watchの使用（ディレクティブ内でjqueryコードを使用している場合）を同期させることができます。

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

app.directive('helloWorld', function ($compile, CarCompany) { 
    return { 
    restrict: 'E', 
    template: '<div>\ 
        <h2>HelloWorld directive</h2>\ 
        <p ng-repeat="car in carc">{{car.name}}</p>\ 
        <h3>Liste des marques:</h3>\ 
       </div>', 
    link: function (scope, elem, attrs) { 

     var ul = document.createElement('ul'); 
     var lis = ''; 
     angular.forEach(CarCompany, function(item) { 
     lis += '<li>' + item.name + '</li>'; 
     }); 
     ul.innerHTML = lis; 

     elem.append(ul); 

     $compile(ul)(scope); 
    }, 

    }; 
}); 

これは、コントローラ&指令間の共有範囲を示す簡単な指示です。 https://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/11/understanding-scopes-in-angularjs-custom-directives.aspx