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>

问题解决了。此时动态插入的元素就可以执行angular指令了,客官可以打开控制台操作以上实例查看结果

AngularJS初始化静态模板的更多相关文章

  1. 解决vue-cli不能初始化webpack模板的问题(vue init卡住了,解决办法)

    报这个错误 有人说是代理问题.我也不懂,但这个方法有用 1.去github上下载要初始化的模板 https://github.com/vuejs-templates/webpack 或者直接用git去 ...

  2. AngularJS 初始化加载流程

    一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM.2.浏览器载入angular.js脚本.3.AngularJS等到DOMContentLoaded事件触发.4.A ...

  3. Spring:注解(@suppresswarnings,@Valid,初始化静态配置数据,定时任务,@EnableAutoConfiguration)

    1.@suppresswarnings(" ") 2.@Valid @Valid注解用于校验,所属包为:javax.validation.Valid. ① 首先需要在实体类的相应字 ...

  4. Java初始化静态变量的时间顺序

    1. 开始吧! 今天,我们来探讨交流下静态变量初始化过程.Java虚拟机在类加载期间也同样遵循这个过程. 2. 初始化过程 在较高的层次上,JVM执行以下步骤: 首先,加载并链接类.然后,这个过程的& ...

  5. Angular系列----AngularJS入门教程02:静态模板(转载)

    为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...

  6. [转载]AngularJS入门教程01:静态模板

    为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...

  7. angularjs初始化时不显示模板内容, 不显示html, 不显示template

    template的内容可能在需要的数据准备好之前就显示出来了, ng-cloak可以解决这个问题 ng-cloak <div id="template1" ng-cloak& ...

  8. AngularJS开发指南2:AngularJS初始化过程

    自动初始化 请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中.比如:<html ng ...

  9. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

随机推荐

  1. Atcoder Grand 006 C-Rabbit Exercise

    题意: 数轴上有n只兔子,第i只兔子的坐标为xi. 有一组操作,这组操作的第i个操作是要让第ai只兔子等概率的跳到自己关于第ai+1或第ai-1只兔子的对称点. 进行K组操作,求每只兔子最后坐标的期望 ...

  2. NO.6: 若不想编译器提供自动生成的函数,就应该明确拒绝

    1.为驳回编译器自动生成函数的技能,可把这些函数的声明放入private,如果是继承类型可把base class的这些函数声明private,可在编译期间得到警告

  3. linux shell重定向

    http://note.youdao.com/noteshare?id=e944e6315d1566b3417e6f59305ddedc

  4. SHOW_PAGE_TRACE

    入口文件开启APP_DEBUG配置文件里添加了'SHOW_PAGE_TRACE' => true,控制器中显示模板在页面右下角也有trace图标但是鼠标放上面不显示手型光标,还是箭头,点不动但是 ...

  5. 鸟哥的Linux私房菜——第十二章:档案的压缩与打包

    视频链接: 土豆:http://www.tudou.com/programs/view/GncwT0FJKsQ B站(推荐):http://www.bilibili.com/video/av98857 ...

  6. 论攻击Web应用的常见技术

    攻击目标: 应用HTTP协议的服务器和客户端.以及运行在服务器上的Web应用等. 攻击基础: HTTP是一种通用的单纯协议机制.在Web应用中,从浏览器那接受到的HTTP请求的全部内容,都可以在客户端 ...

  7. springSecurity自定义认证配置

    上一篇讲了springSecurity的简单入门的小demo,认证用户是在xml中写死的.今天来说一下自定义认证,读取数据库来实现认证.当然,也是非常简单的,因为仅仅是读取数据库,权限是写死的,因为相 ...

  8. JVM调优命令-jps

    JVM Process Status Tool,显示指定系统内所有的HotSpot虚拟机进程. 命令格式 1 jps [options] [hostid] options参数-l : 输出主类全名或j ...

  9. ActiveMQ基础教程----简单介绍与基础使用

    概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...

  10. 20155212 2016-2017-2 《Java程序设计》第8周学习总结

    20155212 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 Chapter14 1. Channel架构与操作 想要取得Channel的实作对象,可以使 ...