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. （转）JDK工具-javadoc命令

    背景:最近在学习java基础知识,看到文档注释部分,一种是在dos命令下生成api文件,另一种是在eclipse下生成api文件.dos方式在<疯狂java讲义>中有详细的说明,eclip ...

  2. Git基本知识

    一,安装 Ubuntu安装git:sudo apt-get install git-core Centos安装git:yum install git-core 二,配置身份---在提交代码时可以辨别身 ...

  3. 如何在Ubuntu-14.04上安装g++-6.3 ?

    特别注意: ppa:ubuntu-toolchain仅为尝鲜测试版,并非官方稳定版. 以下仅用于学习,不建议进行以下操作,以免出现包依赖关系问题,影响系统稳定性. askUbuntu github a ...

  4. Chart Controls 简介与下载

    虽然博客园已有人介绍过了,还是忍不住介绍一下微软这套免费又功能强大的图表控件「Microsoft Chart Controls for Microsoft .NET Framework 3.5」.本帖 ...

  5. Python内置的操作系统模块（os）与解释器交互模块（sys）

    Python内置的操作系统模块(os)与解释器交互模块(sys) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本片博客只介绍Python调用操作系统的模块即os模块,以及Pyth ...

  6. Spark记录-Scala集合

    Scala列表 Scala列表与数组非常相似,列表的所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,列表的元素不能通过赋值来更改. 其次,列表表示一个链表,而数组是平的. 具有类 ...

  7. SQL记录-PLSQL异常

    PL/SQL异常   程序执行过程中出现错误情况被称为在PL/SQL异常. PL/SQL支持程序员在程序中使用异常块捕获这样的条件并采取适当的动作应对错误情况.有两种类型的异常: 系统定义的异常 用户 ...

  8. bzoj千题计划235：bzoj2448: 挖油

    http://www.lydsy.com/JudgeOnline/problem.php?id=2448 一遍过,嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎,O(∩_∩)O~ 题意是最小化最大值 设计区间dp dp[i ...

  9. 考研：操作系统：进程同步—信号量实现同步互斥（PV操作）

    进程互斥的硬件实现方法

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

    20155339 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章NIO与NIO2 NIO使用频道来衔接数据节点,在处理数据时,NIO可以让你设定缓冲 ...