AngularJS初始化静态模板详解


Posted in Javascript onJanuary 14, 2016

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>

以上就是关于AngularJS初始化静态模板的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vue实现文件上传功能
Aug 13 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 #Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 #Javascript
基于javascript实现随机颜色变化效果
Jan 14 #Javascript
JavaScript事件类型中UI事件详解
Jan 14 #Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 #Javascript
详解JavaScript中localStorage使用要点
Jan 13 #Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php实现简单的上传进度条
2015/11/17 PHP
Js四则运算函数代码
2012/07/21 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Python 的 Socket 编程
2015/03/24 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python async with和async for的使用
2019/06/20 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python如何代码集体右移
2020/07/20 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
什么是View State?
2013/01/27 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
英语简历自我评价
2014/01/26 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
学习教师法的心得体会
2014/09/03 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
幼师辞职信范文
2015/02/27 职场文书
历史博物馆观后感
2015/06/05 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis