在动态添加AngularJS的属性和innerHTML

好吧，我是非常新的角度，我已经从不同的来源已经了解它，以了解它很好，显然我仍然努力使它以某种方式工作，在动态添加AngularJS的属性和innerHTML

我已经有简单的htmlpage：

<html> 
<body ng-app> 
    <div id="content"></div> 
</body> 
</html>

然后，我请求数据到服务器之后，我创造这样的：

function updateView($scope){ 
    $scope.test="Success"; 
} 

window.onload=function(){ 
    var content = document.getElementById("content"); 
    var add = document.createElement("div"); 
    add.innerHTML = "{{test}}"; 
    content.appendChild(add); 
    content.setAttribute("ng-controller", "updateView"); 
};

和我得到了什么，结果是与文本的html页面：{{测试}}

，所以我认为它不工作，

我知道这可能是与创建内容和ng控制器，这可以用许多教程所做的更基本的方式完成，但我需要我指定的方法（动态添加属性和内容（测试）），因为我将显示我从服务器可以有不同数量的数据，比如说它有3个数据的数组形式，“var add = document.createElement（”div“）”将被调用3次，我将需要附加属性ng-controller到他们每个人

有没有我还不知道的工作？

来源

2014-06-19 Eldon Lesley

你或许应该使用'NG-repeat'遍历所有的数据从服务器返回 – noj

尝试过，问题在于将“{{}}”添加到innerHTML中，它不链接 –

您从服务器获得哪些数据结构？你不应该在onload函数中做任何与角相关的事情 – noj

为了完成您在Angular中要做的事情，您需要使用$ compile服务，您可以阅读更多关于here的信息。这允许您将html附加到dom并将其链接到您的作用域变量。

为了您的具体的例子，你可以得到$像这样在window.onload方法编译服务：

window.onload=function(){ 
    angular.element("body").injector().invoke(function ($compile) { 
     var content = document.getElementById("content"); 
     var add = document.createElement("div"); 
     add.innerHTML = "{{test}}"; 
     content.appendChild(add); 
     content.setAttribute("ng-controller", "updateView"); 
     $compile(template.contents())(scope); 
    }); 
};

来源

2014-06-19 14:02:59 MDiesel

这个链接理论上可以回答这个问题，但[它会更可取]（http://meta.stackoverflow.com/q/ 8259）在这里包括答案的重要部分，并提供参考链接。 – JJJ

我正在努力:)我会补充一点，不用担心 – MDiesel

在动态添加AngularJS的属性和innerHTML

回答

相关问题