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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
如何利用node转发请求详解
Sep 17 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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript的Function详细
2006/11/14 Javascript
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
js日历功能对象
2012/01/12 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python标记语句块使用方法总结
2019/08/05 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
基于Python实现天天酷跑功能
2021/01/06 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
电气工程师岗位职责
2014/01/01 职场文书
委托书模板
2014/04/04 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
编写python程序的90条建议
2021/04/14 Python
golang elasticsearch Client的使用详解
2021/05/05 Golang
详解redis在微服务领域的贡献
2021/10/16 Redis