在directive的link中有一個(gè)$http請求,當(dāng)請求完成后根據(jù)返回的值動態(tài)做element.append('......');這個(gè)操作坤次,能顯示沒問題褪子,可問題是我動態(tài)組的HTML里面有ng-click荣月,發(fā)現(xiàn)顯示出來的內(nèi)容根本不執(zhí)行ng-click綁定的方法乎折!
這個(gè)是因?yàn)楫惒椒祷刂螅噶畹木幾g已經(jīng)完成嗅定,因此需要動態(tài)編譯顾患。
使用$compile服務(wù)琳拭! 在link方法中對返回后的html代碼經(jīng)過$compile服務(wù)處理后再插入:
var el=$compile("HTML代碼")(scope); element.append(el);
<script>
var app=angular.module('app1',[]);
app.controller('ctr',['$scope',function($scope){
}])
app.directive('myDire',function($compile){
return{
restrict:'AE',
template:"<div>\
<div class='box'>我是父親</div>\
<p style='width:60px; height:30px; border:1px solid red; display:inline-block; float:left; text-align:center; line-height:30px;' ng-click='child(1)''>我是1</p>\
<p style='width:60px; height:30px; border:1px solid red; display:inline-block; float:left;text-align:center; line-height:30px;' ng-click='child(2)'>我是2</p>\
</div>",
link:function($scope,$element,attr){
/*child :function(){
console.log(1)
}*/
$scope.child=function(num){
var box=$element.find('.box');
var chile=$compile('<div child-dire'+num+'></div>')($scope);
box.html(chile);
//box.append(chile);
}
}
}
})
app.directive('childDire1',function(){
return{
restrict:'AE',
template:'<div>我是孩子1</div>'
}
})
app.directive('childDire2',function(){
return{
restrict:'AE',
template:'<div>我是孩子2</div>'
}
})
</script>