如何用JavaScript创建可正常生效的AngularJS ng-model绑定元素？

你遇到的核心问题是：直接通过原生DOM操作插入带有AngularJS指令的HTML内容时，Angular不会自动编译这些新内容，所以ng-model和插值表达式{{TheText}}都无法和作用域绑定，自然没法正常工作。下面我会先解释背后的原因，再给出两种可行的解决办法：

为什么原生DOM插入的Angular指令不生效？ #

AngularJS在初始化阶段会自动编译ng-app范围内的所有DOM，把指令、数据绑定等语法转换成可交互的逻辑。但你用document.createElement和innerHTML插入的内容，是在Angular完成初始编译之后才被添加到页面的——Angular根本不知道这些新元素的存在，所以不会处理里面的Angular语法。

解决方案1：自定义指令（你已实现的最优方案） #

这是Angular官方推荐的扩展DOM的方式，指令的模板会自动被Angular编译并绑定到对应作用域，代码简洁且符合Angular的设计思想。你的实现完全正确，这里再贴出来方便参考：

<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div mydiv></div>
<script>
angular.module("myApp", [])
.directive("mydiv", function() {
return {
template: '<input type="text" ng-model="TheText">{{TheText}}'
};
});
</script>
</body>
</html>

解决方案2：使用$compile服务（你尝试但未成功的动态编译方式） #

如果确实需要在运行时动态生成带Angular指令的HTML，可以用$compile服务。它能把HTML字符串编译成一个链接函数，绑定到当前作用域后，新元素的指令就能正常工作了。修改你最初的代码如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div id="Holder"></div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope, $compile) {
  // 编译HTML字符串，生成绑定到当前作用域的Angular元素
  var compiledElement = $compile('<input type="text" ng-model="TheText">{{TheText}}')($scope);
  // 将编译后的原生DOM节点插入到页面
  document.getElementById("Holder").appendChild(compiledElement[0]);
});
</script>
</body>
</html>

注意要在控制器中注入$compile和$scope服务，编译后的结果是Angular封装的元素对象，用[0]可以获取对应的原生DOM节点。

总结一下：自定义指令是Angular中创建可复用组件的最佳实践，而$compile更适合需要动态生成HTML的特殊场景（比如根据后端返回内容生成带指令的元素）。

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