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:。

我见过this OS，但它不适合我，也许是因为数组。我的代码有什么问题吗？

注意
问题在于，我会创建一个元素（每个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';
};

You can see it in action here.

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);
    });

angularjs数据绑定动态创建的元素

3 个答案: