Angular动态替换Body内容后功能失效，需重新编译元素

你遇到的核心问题是：Angular不会自动编译动态插入到DOM中的HTML内容，而且页面加载后修改ng-app属性也不会重新初始化新的Angular应用。当你用$("body").html(res.data)直接替换内容时，新的ng-controller、ng-click、插值表达式{{}}这些Angular特性都没有被处理，所以看起来就像Angular没生效。

解决方案一：手动Bootstrap新的Angular应用（适合多独立App场景） #

如果你确实需要在登录后切换到另一个独立的Angular应用（myApp），可以在插入新内容后手动触发Angular的初始化流程：

修改loginMain.js中的成功回调函数：

function(res) {
  console.log(res.data);
  // 清空原有内容，避免旧App残留影响
  $("body").empty();
  // 插入新的HTML内容
  $("body").html(res.data);
  // 手动初始化myApp
  angular.element(document).ready(function() {
    // 手动bootstrap目标App，指定挂载元素为body
    angular.bootstrap(document.body, ['myApp']);
  });
}

注意事项： #

1. 确保返回的main.js中正确定义了myApp模块和对应的控制器（比如myController）。
2. 原有的loginApp因为DOM被清空，不会再运行，所以不用担心冲突。

解决方案二：使用单Angular应用+路由（更推荐的Angular最佳实践） #

这种方式不需要替换整个body，而是把登录和主页都纳入同一个Angular应用的路由管理，完全符合Angular的设计模式，避免手动操作DOM的麻烦：

步骤1：重构为单App结构 #

创建一个主应用模块，引入路由依赖：

// 主App模块，依赖ngRoute
angular.module("mainApp", ['ngRoute'])
// 配置路由
.config(function($routeProvider) {
  $routeProvider
    .when('/login', {
      templateUrl: 'login-template.html', // 把原来的登录表单抽成模板
      controller: 'loginController'
    })
    .when('/home', {
      templateUrl: 'home-template.html', // 把主页内容抽成模板
      controller: 'myController'
    })
    .otherwise({redirectTo: '/login'});
});

步骤2：修改登录页面结构 #

原来的登录页面改为挂载主App，并添加ng-view作为视图容器：

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
  <script type="text/javascript" src="js/login/loginMain.js"></script>
</head>
<body>
  <!-- 路由视图容器，会自动加载对应模板 -->
  <div ng-view></div>
</body>
</html>

步骤3：修改登录控制器的跳转逻辑 #

登录成功后不再替换body，而是通过路由跳转：

angular.module("mainApp").controller("loginController", function($scope, $http, $location){
  $scope.unameInputField = "";
  $scope.passwordInputField = "";
  $scope.postForm = function() {
    $http.post("/credentials.json", {username: $scope.unameInputField, password: $scope.passwordInputField}, {headers: {'Content-Type': 'application/json'}}).then(
      function(res) {
        // 登录成功后跳转到主页路由
        $location.path('/home');
      },
      function(res) {
        alert("POST FAILED, Server is most probably offline")
      }
    )
  }
})

这种方式下，所有视图切换都由Angular管理，自动完成编译和链接，不会出现指令不生效的问题。

解决方案三：动态编译HTML片段（单App内动态加载内容） #

如果必须通过后端返回HTML片段来渲染主页，可以在同一个App内使用$compile服务手动编译动态内容：

步骤1：确保控制器注入$compile #

修改登录控制器，注入$compile服务：

angular.module("loginApp").controller("loginController", function($scope, $http, $compile){
  // ... 原有代码
  $scope.postForm = function() {
    $http.post("/credentials.json", ...).then(
      function(res) {
        console.log(res.data);
        // 清空body
        $("body").empty();
        // 将返回的HTML转为Angular元素
        var newElement = angular.element(res.data);
        // 编译元素，绑定到当前scope（或新的scope）
        var compiledElement = $compile(newElement)($scope);
        // 添加到body
        $("body").append(compiledElement);
        // 触发digest循环，确保视图更新
        $scope.$apply();
      },
      // ... 错误处理
    )
  }
})

注意事项： #

1. 主页的控制器（myController）必须定义在当前App（loginApp）中，或者loginApp依赖包含该控制器的模块。
2. 新内容中的ng-init="spanText=S4555"存在语法错误，字符串需要加引号：ng-init="spanText='S4555'"，否则Angular会把S4555当成变量。

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