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. POJ 2251 Dungeon Master /UVA 532 Dungeon Master / ZOJ 1940 Dungeon Master（广度优先搜索）

    POJ 2251 Dungeon Master /UVA 532 Dungeon Master / ZOJ 1940 Dungeon Master(广度优先搜索) Description You ar ...

  2. （转） eclipse项目中.classpath文件详解

    背景:对于java项目中.classpath文件中的相关定义一直不是很了解,有必要进行深入的学习. 1 前言 在使用eclipse或者myeclipse进行Java项目开发的时候,每个project( ...

  3. Java基础-Java中的内存分配与回收机制

    Java基础-Java中的内存分配与回收机制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一. 二.

  4. 鸟哥的Linux私房菜——第八章

    参考鸟哥的Linux私房菜内容,我只是简单的记录比较重要的知识点,所以排版没怎么注意,如果写的太严肃小白也看不进去吧. 看视频!这篇文章只作为备忘录 视频链接:http://www.tudou.com ...

  5. cin,cout,printf,scanf效率对比

    From:http://www.cnblogs.com/killerlegend/p/3918452.html Author:KillerLegend Date:2014.8.17 杭电OJ之3233 ...

  6. ThinkPHP框架学习（一）

    这几天呢,断断续续地在看孙叔华老师的ThinkPHP教程,期间还做了一些其他事情,出去办了点事,总结总结下一学期规划等等,不知不觉间又过去了大半个星期.现在呢,看完了一天的教程,在这里,还是希望稍微总 ...

  7. 2018年11月25日ICPC焦作站参赛总结

    可能就这么退役了吧. 对这次ICPC还是比较有信心的,毕竟心态都放平和了. 路途很波折,热身赛还是赶上了. 等到了正赛的时候,开场看出了A题的签到,签到肯定是我来签的,11分钟签完了这道题之后,开始看 ...

  8. 2018年10月14日ICPC南京站参赛总结

    这次比赛消耗掉了我们全部的信心和精力 在热身赛上,总体来说还是比较愉快的,这个时候心态就不对 正赛的时候我们遇到了A题签到题 我一开始是读错了题意了,认为这个题是一个裸的SG函数,而且那么多人秒过 W ...

  9. Mysql MERGE引擎简介

    一. 什么是MERGE引擎MERGE存储引擎把一组MyISAM数据表当做一个逻辑单元来对待,让我们可以同时对他们进行查询. 二. 应用场景如果需要把日志纪录不停的录入MySQL数据库,并且每天.每周或 ...

  10. Windows bat 学习（高级）

    有一种叫做 Command Processor Extensions 的东西,即命令处理器扩展.他会使命令更加高级,功能更多. 在 cmd 里可以使用 ECHO %CMDEXTVERSION% 查看当 ...