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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
JavaScript中的类型检查
Feb 03 Javascript
vue2路由基本用法实例分析
Mar 06 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
Terran兵种对照表
2020/03/14 星际争霸
用文本文件制作留言板提示(上)
2006/10/09 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
幼儿园师德演讲稿
2014/05/06 职场文书
小学运动会口号
2014/06/07 职场文书
运动会方队口号
2014/06/07 职场文书
安全责任书模板
2014/07/22 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
人事任命书范本
2015/09/21 职场文书