将 ng-repeat 动态附加到 HTML 元素中答案

【问题标题】：Appending ng-repeat into HTML element dynamically将 ng-repeat 动态附加到 HTML 元素中
【发布时间】：2018-04-29 09:07:43
【问题描述】：

我试图在加载时将 ng-repeat 附加到我的 HTML div 中。它可以识别 ng-repeat，但索引值未按应有的方式显示

HTML

<div id="myInnerCarousel"></div>

控制器：

var myCarousel = document.getElementById('myInnerCarousel');
var newItem = document.createElement("div");
newItem.setAttribute("class","item");

var newData = document.createElement("div");
newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
newData.setAttribute("ng-repeat", "mat in " + arr);

//Create individual values seperately
var newMaterialName = document.createElement("h4");
var nameNode = document.createTextNode("{{mat.Name}}");
newMaterialName.appendChild(nameNode);
//Append everything together

newData.appendChild(newMaterialName);
newItem.appendChild(newData);
myCarousel.appendChild(newItem);

然而结果是这样的：

https://gyazo.com/00b76c6b910d4c6701059d404783f720

显示我的数组的想法是正确的，但是 angular 不能正确显示 h4。

编辑：我试图在我的 html 中实现这一点：

<div ng-controller="myController">
<div class="item">
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array1">
        <h4>{{mat.Name}}</h4>
    </div>
</div>
<div class="item">
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array2">
        <h4>{{mat.Name}}</h4>
    </div>
</div>

【问题讨论】：

你需要在新创建的元素上使用 Angular 的 $compile 函数。
我同意@RabbiShuki 的观点。对于您要解决的任何问题，这似乎都不是一种角度方法。你为什么决定像这样在页面加载时进行 DOM 操作？是否有某些原因导致您的 HTML 代码不能在您的模板文件中？
您对最终结果的期望有点清楚，但是您仍然没有真正描述为什么要尝试以这种非角度的方式执行此操作。 DOM Manipulation 正是 Angular 为拯救你而创建的实践，因此使用 DOM Manipulation 来创建 Angular 元素与框架设计背道而驰。

标签： javascript html angularjs appendchild

【解决方案1】：

动态添加的组件应该使用 Angular 编译。您可以使用 $compile 角度函数。 下面是工作代码。

Jsfiddle

function TodoCtrl($scope, $compile) {
    $scope.arr = [{Name: "Dynamically Added cowermponent"}];
    var myCarousel = document.getElementById('myInnerCarousel');
    var newItem = document.createElement("div");
    newItem.setAttribute("class","item");

    var newData = document.createElement("div");
    newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
    newData.setAttribute("ng-repeat", "mat in arr");

    //Create individual values seperately
    var newMaterialName = document.createElement("h4");
    var nameNode = document.createTextNode("{{mat.Name}}");
    newMaterialName.appendChild(nameNode);
    //Append everything together

    newData.appendChild(newMaterialName);
    newItem.appendChild(newData);
    myCarousel.appendChild(newItem);
    $compile(newItem)($scope);
}

【讨论】：

嗨@KennyNguyen，我已经添加了将ng-repeat动态添加到html的代码。
不错的答案，我第一次听说$compile，哇，工作，你的帖子真的帮助我更多地了解了angularjs。
听到您的评论感到无比幸福！

【解决方案2】：

让我们简单地声明这不是这样做的方法。

一种更好、更有棱角的方式是（假设您的应用名称是app）。

HTML

<div ng-controller="myController">
    <div class="item">
        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array">
            <h4>{{mat.Name}}</h4>
        </div>
    </div>
</div>

角度控制器

angular.module('app').controller('myController', function($scope) {
    $scope.array = [{Name: 'abc'}, {Name: 'def'}]; // or whatever your data looks like.
});

【讨论】：

您好，我完全理解。请在帖子中查看我的编辑，以更好地了解我想要实现的目标
在 html 代码中，是的。但在视觉上我得到了你在上面的链接中看到的内容
在我看来，您的 Angular 应用程序连接不正确。一些常见的错误可能是，1. 忘记将ng-app 添加到body。 2.忘记将controller添加到div。和更多。尝试在 chrome 中检查控制台，看看那里是否有任何错误，可能会为您指明正确的方向。