angularjs數據綁定動態創建的元素

Question

我在我的應用程序中有這個代碼：

$scope.appendBets = function()
{
    $.each($scope.phaseBets, function(i, bet)
    {
        var betElement = angular.element('<div ng-model="phaseBets[i]">Bet id: {{phaseBets[i].id}}</div>');
        angular.element(document.querySelector('#betsHolder')).append(betElement);
        $compile(betElement)($scope);
    });
}

$scope.phaseBets是從$http.get加載的。

現在的問題是html頁面上沒有看到的{{phaseBets[i].id}}內容，我得到了這個Bet id: .

我見過這個操作系統，但它不適合我，也許是因為陣列。 我的代碼有什么問題嗎？

注意
問題在於，我會創建一個元素（每個id都不同），因此ng-repeat沒有幫助那個mutch。

Answer 1

我認為你從錯誤的方面得到它，在angularjs控制器/數據驅動器視圖中，在這里你創建元素（更糟糕的是將它們添加到頁面）循環（昂貴的DOM操作）我用以下代碼替換你的代碼

<div id="betsHolder">
  <div ng-repeat="bet in phaseBets track by bet.id">Bet id: {{bet.id}}</div>
</div>

只要將數組/對象分配給$ scope.phaseBets，就會創建DOM

Answer 2

以下是我使用ng-repeat和ng-include ：

$scope.items = [
    {id: 1, title: 'foo', data: {body: 'baz1'}},
    {id: 2, title: 'bar', data: {body: 'baz2'}}
];

<div ng-repeat="item in items">
    <h2>{{item.title}}</h2>
    <div ng-include src="getTemplateById(item.id)"></div>
</div>

模板的內聯定義如下：

<script type="text/ng-template" id="template-1.html">
    Content of template-1.html
    <div>{{item.data.body}}</div>
</script>

<script type="text/ng-template" id="template-2.html">
    <p>Content of template-2.html</p>
</script>

和getTemplateById是：

$scope.getTemplateById = function(id) {
    return 'template-' + id + '.html';
};

你可以在這里看到它。

Answer 3

但使用ng-repeat是更好的選擇，

   angular.forEach($scope.phaseBets, function(bet, i)
    {
        var betElement = angular.element('<div ng-model="bet">Bet id: {{bet.id}}</div>');
        angular.element(document.querySelector('#betsHolder')).append(betElement);
        $compile(betElement)($scope);
    });