如何为未加载到DOM的动态生成HTML启用AngularJS功能？

你遇到的核心问题是AngularJS只会在页面初始加载时编译一次DOM，通过AJAX动态插入的HTML内容不会被自动识别和编译，所以绑定的ng-click和表达式{{firstname}}都不会生效。另外你的代码还有几个小问题：

• AJAX请求里有语法错误（url后面漏了逗号，content-type参数名应为contentType，编码格式拼写错误）
• 动态HTML里嵌套了ng-app，Angular不支持多个嵌套的ng-app，而且第二次也不会自动初始化

要让动态HTML生效，需要用Angular的$compile服务手动编译插入的DOM，同时调整代码结构：

步骤1：调整页面基础结构 #

把ng-app放在页面根元素（比如<body>），避免嵌套，同时确保Angular模块和控制器在页面加载时就定义好：

<!-- myPage.aspx -->
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body ng-app='myApp' ng-controller='myCtrl'>
    <div id="div1"></div>
</body>
</html>

步骤2：修正并优化脚本代码 #

• 提前定义Angular模块和控制器，不要等到AJAX成功后再定义
• 使用$compile服务编译动态插入的HTML，注意注入$compile和$scope
• 修复AJAX的语法错误

$(document).ready(function() {
    // 提前定义Angular模块和控制器
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $compile) {
        $scope.firstname = "John";
        $scope.changeName = function () {
            $scope.firstname = "Nelly";
        };

        // 发起AJAX请求
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8', // 修正参数名和编码格式
            url: 'myPage.aspx/DynamicHtml',
            success: function(data) {
                var dynamicHtml = data.d;
                // 把动态HTML插入到div1
                var $div = $("#div1").html(dynamicHtml);
                // 手动编译DOM，让Angular识别指令和表达式
                $compile($div.contents())($scope);
                // 触发digest循环，确保数据绑定生效
                $scope.$apply();
            }
        });
    });
});

步骤3：修改C#返回的动态HTML #

去掉嵌套的ng-app和ng-controller，因为已经在页面根元素上定义了：

[WebMethod]
public static string DynamicHtml() {
    StringBuilder sb = new StringBuilder();
    // 只保留需要动态加载的内容，去掉ng-app和ng-controller
    sb.Append(" <h1 id='myName' ng-click='changeName()'> {{firstname}} </h1> ");
    return sb.ToString();
}

• $compile服务会把HTML字符串或DOM元素转化为Angular可以识别的模板，编译后会绑定当前$scope，这样动态内容里的指令和表达式就能正常工作
• $scope.$apply()会触发Angular的脏检查机制，确保数据变化能同步到视图

内容的提问来源于stack exchange，提问作者Charan Kumar