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. Luogu2661 信息传递（图论）

    Luogu2661 信息传递(图论) Description 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti ...

  2. C#列表所有IIS站点以及相关站点属性

    using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...

  3. 自己写的一个Vue

    下面这里是我自己写的一个小型的vue,原理就是proxy: //Proxy天生没有prototype,因此要加上,不然extends会报错 Proxy.prototype = Proxy.protot ...

  4. Hadoop基础-MapReduce的排序

    Hadoop基础-MapReduce的排序 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MapReduce的排序分类 1>.部分排序 部分排序是对单个分区进行排序,举个 ...

  5. 在ajax请求后台时在请求标头RequestHeader加token

    情景:为了保证系统数据的安全性,一般前后台之间的数据访问会有授权与验证,这里的Token机制相对于Cookie支持跨域访问,在RESTful API里面,验证一般可以使用POST请求来通过验证,使服务 ...

  6. python 玩具代码

    脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它,就这么简单 #!/usr/bin/python是告诉操作系统执行这个脚本的时候,调用/usr/bin下的python ...

  7. Ubuntu 16.04开机自启Nginx简单脚本

    本文要记述的是最简单的Ubuntu下开机自启 nginx的脚本 这里将nginx装在了/usr/local/nginx目录下,nginx本身没有注册成服务,所以直接使用服务开机自启是不行的,除非自己写 ...

  8. JavaScript事件模拟元素拖动

    一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...

  9. [整理]IIS 6.0 下部署 Asp.net MVC Web Api 后 HTTP PUT and DELETE 请求失败

    http://guodong.me/?p=1560 ASP.NET MVC 4 has a new feature called WebAPI which makes it much easier t ...

  10. Java 多线程(Thread) 同步(synchronized) 以及 wait, notify 相关 [实例介绍]

    场景描述 有一家很大的商场,在某市有几个商品配送中心,并有几家分店,这家商场经营很多的商品,平时运营情况是这样的: 根据各分店的商品销售情况,给分店配送相应需求量的商品:并上架到分店指让的位置,供客户 ...