AngularJS初始化静态模板详解
更新时间：2016年01月14日 09:24:54 投稿：lijiao
这篇文章主要为大家介绍了AngularJS初始化静态模板，AngularJS初始化静态模板有两种方式，一是通过ng-app来自动初始化模块，也可以通过angular.bootstrap(document, [module])手动启动应用，感兴趣的小伙伴们可以参考一下
AngularJS可以通过ng-app来自动初始化模块，也可以通过angular.bootstrap(document, [module])手动启动应用，不管用哪种方法，应用启动后，动态往dom树里面添加的dom元素，无法执行angular指令，即无法通过ng-model、ng-click给动态添加的dom元素绑定数据和事件，怎么办？
动态添加dom元素的场景非常常见，如点击某页面上修改用户资料的按钮，发送ajax请求去查询用户资料，然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串，最后将HTML字符串append到页面显示出来，一般情况下我们会这样做：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>demo</title>
<meta charset="utf-8"/>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script id="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: 1px solid red;
}
</style>
</head>
<body ng-controller="myCtrl">
<script>
var app = angular.module('app',[]);
app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
scope.valchange = function(){
console.log('value change')
}
scope.edit = function(){
//假设这是ajax返回的数据
scope.username = 'wangmeijian';
scope.password = '000000';
$(".contani").html(myTmpl.innerHTML);
}
}])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
<form>
用户名：<input type="text" ng-model="username" />
密码：<input type="text" ng-model="password" />
</form>
</script>
</body>
</html>
点击修改资料按钮，新插入的dom元素并没有绑定ajax返回的数据，这是因为点击按钮前angular已经初始化完毕了，解决办法当然不是再初始化一次，而是单独使用$compile编译静态模板的HTML，然后再插入dom树中
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>demo</title>
<meta charset="utf-8"/>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script id="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: 1px solid red;
}
</style>
</head>
<body ng-controller="myCtrl">
<script>
var app = angular.module('app',[]);
app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
scope.valchange = function(){
console.log('value change')
}
scope.edit = function(){
//假设这是ajax返回的数据
scope.username = 'wangmeijian';
scope.password = '000000';
//$(".contani").html(myTmpl.innerHTML);
$(".contani").append( $compile(myTmpl.innerHTML)(scope) )
}
}])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
<form>
用户名：<input type="text" ng-model="username" ng-change="valchange()" />
密码：<input type="text" ng-model="password" ng-change="valchange()" />
</form>
</script>
</body>
</html>
以上就是关于AngularJS初始化静态模板的详细介绍，希望对大家的学习有所帮助。
相关文章
![AngularJS 使用ng-repeat报错 [ngRepeat:dupes]](//img.jbzj.com/images/xgimg/bcimg0.png)
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
这篇文章主要介绍了AngularJS 使用ng-repeat报错 [ngRepeat:dupes] 的相关资料,需要的朋友可以参考下2017-01-01
我们的接口是单独编写的处理的，在实际的开发项目中，有众多的接口，有些需要登陆凭证，有些不需要。一个一个接口处理不妥，我们是否可以考虑对请求进行拦截封装，感兴趣的可以了解一下2022-04-04
这篇文章主要介绍了在AngularJS中使用AJAX的方法,示例非常简单,并不能完全体现出AJAX动态刷新的强大功能,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了Angular.js基础学习之初始化的相关资料，AngularJS 启动有两种方式，一种是绑定初始化，自动加载，另外一种是手动初始化，文中介绍的很详细，需要的朋友可以参考下。2017-03-03
今天小编就为大家分享一篇解决angularjs中同步执行http请求的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法，内容很全面，感兴趣的小伙伴们可以参考一下2016-04-04
今天小编就为大家分享一篇angular2 组件之间通过service互相传递的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Angular中使用Intersection Observer API实现无限滚动效果
这篇文章主要介绍了Angular中使用Intersection Observer API实现无限滚动,实现原理为 在data下面加一个loading元素 如果此元素进入视窗 则调用api获取新的数据加到原来的数据里面,这时loading就会被新数据顶下去,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了AngularJS折叠菜单实现方法,结合完整实例形式分析了AngularJS实现折叠菜单的具体步骤与相关操作技巧,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Angular1.x自定义指令,结合实例形式分析了Angular1.x自定义指令的实现与使用方法,以及相关操作技巧与注意事项,需要的朋友可以参考下2017-03-03
![AngularJS 使用ng-repeat报错 [ngRepeat:dupes]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论