AngularJS初始化静态模板详解
AngularJS可以通过ng-app来自动初始化模块，也可以通过angular.bootstrap(document,[module])手动启动应用，不管用哪种方法，应用启动后，动态往dom树里面添加的dom元素，无法执行angular指令，即无法通过ng-model、ng-click给动态添加的dom元素绑定数据和事件，怎么办？
动态添加dom元素的场景非常常见，如点击某页面上修改用户资料的按钮，发送ajax请求去查询用户资料，然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串，最后将HTML字符串append到页面显示出来，一般情况下我们会这样做：
<!DOCTYPEhtml>
<htmlng-app="app">
<head>
<title>demo</title>
<metacharset="utf-8"/>
<scriptsrc="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<scriptid="others_angular_103"type="text/javascript"class="library"src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
<style>
.contani{
width:100%;
height:300px;
border:1pxsolidred;
}
</style>
</head>
<bodyng-controller="myCtrl">
<script>
varapp=angular.module('app',[]);
app.controller('myCtrl',['$scope','$compile',function(scope,$compile){
scope.valchange=function(){
console.log('valuechange')
}
scope.edit=function(){
//假设这是ajax返回的数据
scope.username='wangmeijian';
scope.password='000000';
$(".contani").html(myTmpl.innerHTML);
}
}])
</script>
<buttonng-click="edit()">修改资料</button>
<divclass="contani"></div>
<scripttype="text/html"id="myTmpl">
<form>
用户名：<inputtype="text"ng-model="username"/>
密码：<inputtype="text"ng-model="password"/>
</form>
</script>
</body>
</html>
点击修改资料按钮，新插入的dom元素并没有绑定ajax返回的数据，这是因为点击按钮前angular已经初始化完毕了，解决办法当然不是再初始化一次，而是单独使用$compile编译静态模板的HTML，然后再插入dom树中
<!DOCTYPEhtml>
<htmlng-app="app">
<head>
<title>demo</title>
<metacharset="utf-8"/>
<scriptsrc="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<scriptid="others_angular_103"type="text/javascript"class="library"src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
<style>
.contani{
width:100%;
height:300px;
border:1pxsolidred;
}
</style>
</head>
<bodyng-controller="myCtrl">
<script>
varapp=angular.module('app',[]);
app.controller('myCtrl',['$scope','$compile',function(scope,$compile){
scope.valchange=function(){
console.log('valuechange')
}
scope.edit=function(){
//假设这是ajax返回的数据
scope.username='wangmeijian';
scope.password='000000';
//$(".contani").html(myTmpl.innerHTML);
$(".contani").append($compile(myTmpl.innerHTML)(scope))
}
}])
</script>
<buttonng-click="edit()">修改资料</button>
<divclass="contani"></div>
<scripttype="text/html"id="myTmpl">
<form>
用户名：<inputtype="text"ng-model="username"ng-change="valchange()"/>
密码：<inputtype="text"ng-model="password"ng-change="valchange()"/>
</form>
</script>
</body>
</html>
以上就是关于AngularJS初始化静态模板的详细介绍，希望对大家的学习有所帮助。