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初始化靜態模板的詳細介紹，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
