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. LOJ#2983. 「WC2019」数树

    传送门 抄题解 \(Task0\),随便做一下,设 \(cnt\) 为相同的边的个数,输出 \(y^{n-cnt}\) \(Task1\),给定其中一棵树 设初始答案为 \(y^n\),首先可以发现, ...

  2. Spring MVC 向页面传值-Map、Model和ModelMap

    原文链接:https://www.cnblogs.com/caoyc/p/5635878.html Spring MVC 向页面传值-Map.Model和ModelMap 除了使用ModelAndVi ...

  3. RBAC: 基于角色的访问控制(Role-Based Access Control)

    本文只讨论两种基于角色的访问控制的不同点,不涉及权限设计的数据库设计. 基于角色的访问控制(Role-Based Access Control)可分为隐式角色访问控制和显式角色访问控制. 隐式角色访问 ...

  4. bzoj千题计划268：bzoj3131: [Sdoi2013]淘金

    http://www.lydsy.com/JudgeOnline/problem.php?id=3131 如果已知 s[i]=j 表示有j个<=n数的数码乘积=i 那么就会有 s[a1]*s[a ...

  5. C#_界面程序_数码游戏

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 用matplotlib制作的比较满意的蜡烛图

    用matplotlib制作的比较满意的蜡烛图 2D图形制作包, 功能强大, 习练了很久, 终于搞定了一个比较满意的脚本. 特点: 使用方面要非常简单 绘制出来的图要非常的满意, 具有如下的特点 时间和 ...

  7. H5 Day1 练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [转载]Markdown——入门指南

    http://www.jianshu.com/p/1e402922ee32/ 转载请注明原作者,如果你觉得这篇文章对你有帮助或启发,也可以来请我喝咖啡. 导语: Markdown 是一种轻量级的「标记 ...

  9. 第10月第4天 Mac g++ sfml opendir

    1. g++ OpenGL.cpp -I/Users/temp/Downloads/SFML-2.4.2-osx-clang/include -L/usr/local/lib -framework O ...

  10. FFT（Rock Paper Scissors Gym - 101667H）

    题目链接:https://vjudge.net/problem/Gym-101667H 题目大意:首先给你两个字符串,R代表石头,P代表布,S代表剪刀,第一个字符串代表第一个人每一次出的类型,第二个字 ...