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

【问题标题】：angularjs data binding with dynamically created elementsangularjs 数据绑定与动态创建的元素
【发布时间】：2014-06-19 19:15:10
【问题描述】：

我的应用程序中有此代码：

$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 不会帮助那个笨蛋。

【问题讨论】：

停止使用jQuerys append（或AngularJS的精简版）并开始使用ng-repeat。它与某人已经想到这个问题并为您处理它的附加值完全相同。（我一直在广泛使用 AngularJS，来自 jQuery 背景，大约一个月后发现我不再需要这种手动 DOM 操作）
所以使用 ng-include (docs.angularjs.org/api/ng/directive/ngInclude) 根据每个不同的 ID 构建模板 URL。 - 请相信我们这一点：stop 尝试以 jQuery 方式执行此操作，并以 AngularJS 方式处理它。这需要一些时间，您会阅读/提出很多关于 Stack Overflow 的问题，但值得您花时间。
谢谢@Sergiu Paraschiv，这就是我问的原因。如果我需要为每个 id 包含不同的 html，我将如何使用 nginclude。
我还看到您使用的是ng-model。它仅适用于input 节点。

标签： javascript html angularjs

【解决方案1】：

这是我使用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.

【讨论】：

【解决方案2】：

我认为你从错误的角度得到它，在 angularjs 控制器/数据驱动视图中，你在循环中创建元素（更糟糕的是将它们添加到页面）（昂贵的 DOM 操作）我会用以下代码替换您的代码

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

只要将数组/对象分配给 $scope.phaseBets，就会创建 DOM

【讨论】：

问题是，我将创建一个元素（每个 id 都不同），所以 ng-repeat 无济于事。
每个id的不同是什么意思？不同的班级、名字或其他什么？

【解决方案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);
    });

【讨论】：

不，不，不，永远不要在循环中添加 DOM，其次，ng-repeat 正是 vlio 所需要的
同意 ng-repeat 是更好的选择，我只是修复 vlio20 代码
问题是，我将创建一个元素（每个 id 都不同），所以 ng-repeat 无济于事。
所以我的代码应该可以解决你的问题，你有没有看到你的投注ID？