如何将 angularJs 用于动态创建的 HTML（未加载到 DOM）
Posted
技术标签:
【中文标题】如何将 angularJs 用于动态创建的 HTML（未加载到 DOM）【英文标题】：How to use angularJs for dynamically created HTML(Which is not loaded to DOM) 【发布时间】：2018-09-01 21:40:13 【问题描述】：您好，我对 AngularJs 很陌生。 我通过调用 ajax 函数从 C# 检索 html 数据。在这里，我尝试将 AngularJs 功能用于动态生成的 HTML。但是我看不到任何 AngularJs 对此的影响。但是 AngularJs 效果对于静态 HTML 效果很好。请帮助我。
下面是例子。
C# 代码：
[WebMethod]
public static string DynamicHtml()
StringBuilder sb=new StringBuilder();
sb.append("
<div ng-app='myApp' ng-controller='myCtrl'>
<h1 id='myName' ng-click='changeName()'>
firstname
</h1>
</div>
");
return sb.ToString();
HTML 代码： myPage.aspx
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
脚本
$(document).ready(
$.ajax(
type:'POST',
content-type:'application/json;charset-4',
url:'myPage.aspx/DynamicHtml'
success:function(data)
$("#div1").html(data.d);
ChangeNameFunc();
)
function ChangeNameFunc()
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope)
$scope.firstname = "John";
$scope.changeName = function ()
$scope.firstname = "Nelly";
);
);
在上面的代码中，我使用 ajax 调用从 c# 中检索 html 数据并将其绑定到 div1。当我尝试单击 John 时，名称不会更改为 Nelly。请注意，Angular 函数在静态页面中使用时有效。
【问题讨论】：
你必须初始化 ng-app 并在静态 DOM 中导入库文件。然后您可以向其中添加任何动态代码。有时你需要 q.apply() 代码来刷新 Angular DOM。 你能建议我怎么做吗？ 【参考方案1】：<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app='myApp' ng-controller='myCtrl'>
<div id="div1">
</div>
</body>
</html>
请尝试自行声明 ng-app 和 ng-controller 并告诉我。
【讨论】：
嗨，亚历克西斯，感谢您的回复。我正在使用多个 ng-app。所以我想动态生成一切。请以另一种方式提供给我。 我的建议最好不要使用多个 ng-app 但是，如果我们没有任何选择，那么我们该如何实现。请帮帮我以上是关于如何将 angularJs 用于动态创建的 HTML（未加载到 DOM）的主要内容，如果未能解决你的问题，请参考以下文章
如何将由代码创建的 html 表转换为 json 对象？ AngularJS