如何爲每個編譯元素創建個人範圍？

當我創造新的 'wItem' 對象，並希望編譯DOM追加到容器（不NG-重複）如何爲每個編譯元素創建個人範圍？

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 scope.and我得到這個：

我並不擅長，但我認爲它將最後一個元素的範圍傳遞給了prev。如何解決它？

來源

2017-01-04 Serhiy

您的$編譯代碼，是否在一個指令中實現？如果包含整個代碼。 – RamblinRose

不，它在控制器中 – Serhiy

修改控制器中的DOM被認爲是不好的做法。您的元素處於相同的作用域級別，所以自然而然地，您只是覆蓋作用域屬性「項目」。 – RamblinRose

首先，不要操縱你的控制器的DOM。控制器提供範圍，通常只是視圖和模型的範圍粘合。

熟悉directives因爲他們實際上是必需的。同樣，瞭解scopes也很重要。不瞭解範圍和指示將會導致你的角色努力。

下面是一個實現你的UIService的指令。它可以通過其他方式完成。

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

正如已指出的，你需要熟悉NG重複指令。使用工作項指令和NG-重複一個例子可能是這樣的

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

Here's a plnkr展示與NG-重複使用了上述指令。

我建議您遠離$compile，直到您掌握了指令和範圍（並且實際上有充分理由使用它）。

來源

2017-01-04 15:30:51 RamblinRose

如何爲每個編譯元素創建個人範圍？

回答

相關問題