如何为每个编译元素创建个人范围？

Question

当我创建新的'wItem'对象并希望将编译的DOM附加到容器（不是ng-repeat）时

 container.append($compile(UIService.appendItem())($scope));
 var children = container[0].children;
 var length = children.length-1;
 //take appended element and set new scope Item there
 var newEl = children[length];
 angular.element(newEl).scope().item = wItem;

UIService.appendItem

  function appendWorkItem() {
        return '<div  layout="column"  class=" workItem  workItemName" id={{item._id}}child > ' +
            '<div>{{item.name}}</div> ' +
            ' </div>'
    }

结果是： 第一次

wItem[0] = {_id:1, name: item1}

，它创建了wItem并附加到DOM！ 第二次和其他时间我应该：

 wItem[1] = {_id:2, name: item2}
 wItem[2] = {_id:3, name: item3}

它创建了新的wItem，当它附加到DOM时，它会使用最后一个wItem范围更新以前创建的元素。我得到了这个：

我不是很好，但我认为它将最后一个元素的范围传递给了前一个元素。如何解决？

Answer 1

首先，不要从控制器中操作DOM。控制器提供范围，通常只是视图和模型的范围粘合剂。

熟悉scopes，因为它们几乎是必需的。同样，理解Here's a plnkr至关重要。未能理解范围和指令将使你的角度努力失败。

这是实施您的UIService的指令。它可以通过其他方式完成。

  .directive("workItem", ['UIService', function(uiservice) {
    return {
      scope: {
        item: "="
      },
      template: function() {
        return uiservice.appendWorkItem();
      }
    }
  }])

正如已经指出的那样，您需要熟悉 ng-repeat 指令。使用workItem指令和ng-repeat的示例可能如下所示

<div ng-controller="WorkItems">  
   <div ng-repeat="item in items">
      <work-item item="item"></work-item>
   </div>
</div>

$compile演示上述指令与ng-repeat一起使用。

我建议远离{{3}}，直到你掌握了指令和范围（实际上有一个真正的理由来使用它）。