AngularJS初始化靜態模板詳解_AngularJS
- WBOY原創
- 2016-05-16 15:20:021120瀏覽
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初始化靜態模板的詳細介紹，希望對大家的學習有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn