AngularJs指令多次发布

Question

我想多次使用我的指令。每次我点击我的按钮，我都希望相应地更新模板。 最初$ scope.item包含item.id = 1.因此它显示为

接下来，当我点击按钮时，我将item.id更改为4.现在结果如下。

但是如您所见，显示的初始item1已更改为item4。

我想首先显示item1，然后点击按钮我想显示item4而不更改显示的初始值。我怎样才能做到这一点？

我有以下指令

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

我的控制器

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

你应该尽量避免在控制器中进行DOM操作 - 这不是“Angular方式”。

在这种情况下，我会在<my-directive>上使用ng-repeat：

<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/