AngularJS初始化静态模板详解
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要为大家介绍了AngularJS初始化静态模板,AngularJS初始化静态模板有两种方式,一是通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,感兴趣的小伙伴们可以参考一下
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./jquery/3.0.0-alpha1/jquery.min.js"></script> <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs./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','$pile',function(scope,$pile){ 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已经初始化完毕了,解决办法当然不是再初始化一次,而是单独使用$pile编译静态模板的HTML,然后再插入dom树中
<!DOCTYPE html> <html ng-app="app"> <head> <title>demo</title> <meta charset="utf-8"/> <script src="http://cdn.bootcss./jquery/3.0.0-alpha1/jquery.min.js"></script> <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs./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','$pile',function(scope,$pile){ scope.valchange = function(){ console.log('value change') } scope.edit = function(){ //假设这是ajax返回的数据 scope.username = 'wangmeijian'; scope.password = '000000'; //$(".contani").html(myTmpl.innerHTML); $(".contani").append( $pile(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初始化静态模板的详细介绍,希望对大家的学习有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程