AngularJsディレクティブ複数回発行

Question

ディレクティブを複数回使用したい。私のボタンをクリックするたびに、それに応じてテンプレートが更新されます。 Intially $ scope.itemはitem.idが、私は今、次のように結果が4にitem.idを変更するボタンをクリックすると、そのためには

として次を表示1. =含まれています。

しかし、あなたが見るように、表示される初期ITEM1はITEM4に変更されました。

最初にitem1を表示し、ボタンをクリックして、表示された初期値を変更せずにitem4を表示したいとします。どうすればこれを達成できますか？

私はあなたがコントローラでDOM操作を行うことを避けるようにしてください私のコントローラ

function MyCtrl($scope,$compile) { 
    $scope.item = {id: 'item1'};  
    $scope.hello = function() { 
     $scope.item = {id: 'item4'}; 
     var dialogTextHTML ="<my-directive item ='item'></my-directive>" 
     var compiledDialogData = $compile(dialogTextHTML)($scope); 
     document.getElementById('mycontainer').appendChild(compiledDialogData[0]); 
    } 
} 

マイHTML

<div ng-controller="MyCtrl"> 
<button ng-click="hello()"> 
Click here 
</button> 
    <div id='container'> 
    <my-directive item='item'></my-directive> 
    </div> 
</div> 

Answer 1

次のディレクティブ

var app = angular.module('myApp', []); 
app.directive('myDirective', function() { 
    return { 
     restrict: 'AE', 
     scope:true, 
     template: '<div>{{ item.id }}</div>' 
    } 
}); 

を持っている - それは、「角度ではありません方法"。この場合

は、私が <my-directive>にNG・リピートを使用します。

<my-directive ng-repeat="item in items" item='item'></my-directive> 

を次にクリックするたびに、単に項目のリストに項目を追加します。

function MyCtrl($scope, $compile) { 
    $scope.items = []; 

    var idCount = 0; 

    function addItem() { 
    idCount += 1; 
    $scope.items.push({ 
     id: 'item' + idCount 
    }); 
    } 

    $scope.hello = function() { 
    addItem(); 
    } 

    addItem(); 
} 

の作業jsfiddle：https://jsfiddle.net/ub3zmo9s/1/