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. Linux上java程序的jar包启动通用脚本（稳定用过）

    Linux上java程序的jar包启动通用脚本如下: #! /bin/sh export LANG="zh_CN.GBK" SERVICE_NAME=` .sh` SCRIPT_N ...

  2. Spark记录-源码编译spark2.2.0（结合Hive on Spark/Hive on MR2/Spark on Yarn）

    #spark2.2.0源码编译 #组件:mvn-3.3.9 jdk-1.8 #wget http://mirror.bit.edu.cn/apache/spark/spark-2.2.0/spark- ...

  3. 2018年5月6日GDCPC (广东赛区)总结

    试机是队友浩哥一个人去的,因为觉得华工去了不少次了,环境也比较熟悉了.直到看到了现场环境,感觉有些拥挤,不如从前那样宽敞,增加了一些紧张的不适感. 比赛开始时,我们三人分头读题,虽说题目比较简短,但第 ...

  4. Brief History of Machine Learning

    Brief History of Machine Learning My subjective ML timeline Since the initial standpoint of science, ...

  5. scale.fix.js

    无意间在一个网站上看到的,本来是对另一个效果感兴趣的,结果看到这个放开来的js就读了一下. var metas = document.getElementsByTagName('meta'); var ...

  6. [ASP.NET]初试Web API

    Web API 1: 需要环境(VS2010/.Net4.0/MVC4 ) http://www.asp.net/web-api/overview/creating-web-apis/creating ...

  7. 使用NSIS制作安装包

    nsis下载地址:http://www.pc6.com/softview/SoftView_14342.html nsis使用: 启动NSIS程序主界面,选择“可视化脚本编辑器(VNISEdit)”菜 ...

  8. arm交叉编译器gnueabi、none-eabi、arm-eabi、gnueabihf等的区别【转】

    转自:https://www.cnblogs.com/deng-tao/p/6432578.html 博客来之于:  http://www.veryarm.com/296.html 交叉编译工具链的命 ...

  9. centos7系统下安装配置jdk、tomcat教程

    JDK安装与配置 1.下载linux版本的jdk,我下的版本是jdk6.0,下载rpm版本的. 可通过百度搜索文件名:jdk-6u45-linux-x64-rpm.bin下载 也可通过oracle官网 ...

  10. 移动端console.log()调试

    在微信或app进行开发的时候,没法直接查看console.log的输出内容,调试起来简直太痛苦了. 1.笨笨的方法 fiddler抓请求:追加dom节点,显示调试信息. var div =docume ...