AngularJS初始化静态模板详解
AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document,[module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model、ng-click给动态添加的dom元素绑定数据和事件,怎么办?
动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串,最后将HTML字符串append到页面显示出来,一般情况下我们会这样做:
<!DOCTYPEhtml> <htmlng-app="app"> <head> <title>demo</title> <metacharset="utf-8"/> <scriptsrc="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script> <scriptid="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:1pxsolidred; } </style> </head> <bodyng-controller="myCtrl"> <script> varapp=angular.module('app',[]); app.controller('myCtrl',['$scope','$compile',function(scope,$compile){ scope.valchange=function(){ console.log('valuechange') } scope.edit=function(){ //假设这是ajax返回的数据 scope.username='wangmeijian'; scope.password='000000'; $(".contani").html(myTmpl.innerHTML); } }]) </script> <buttonng-click="edit()">修改资料</button> <divclass="contani"></div> <scripttype="text/html"id="myTmpl"> <form> 用户名:<inputtype="text"ng-model="username"/> 密码:<inputtype="text"ng-model="password"/> </form> </script> </body> </html>
点击修改资料按钮,新插入的dom元素并没有绑定ajax返回的数据,这是因为点击按钮前angular已经初始化完毕了,解决办法当然不是再初始化一次,而是单独使用$compile编译静态模板的HTML,然后再插入dom树中
<!DOCTYPEhtml> <htmlng-app="app"> <head> <title>demo</title> <metacharset="utf-8"/> <scriptsrc="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script> <scriptid="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:1pxsolidred; } </style> </head> <bodyng-controller="myCtrl"> <script> varapp=angular.module('app',[]); app.controller('myCtrl',['$scope','$compile',function(scope,$compile){ scope.valchange=function(){ console.log('valuechange') } scope.edit=function(){ //假设这是ajax返回的数据 scope.username='wangmeijian'; scope.password='000000'; //$(".contani").html(myTmpl.innerHTML); $(".contani").append($compile(myTmpl.innerHTML)(scope)) } }]) </script> <buttonng-click="edit()">修改资料</button> <divclass="contani"></div> <scripttype="text/html"id="myTmpl"> <form> 用户名:<inputtype="text"ng-model="username"ng-change="valchange()"/> 密码:<inputtype="text"ng-model="password"ng-change="valchange()"/> </form> </script> </body> </html>
以上就是关于AngularJS初始化静态模板的详细介绍,希望对大家的学习有所帮助。