$compile

angularjs的$compile用法

在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！

这个是因为异步返回之后，指令的编译已经完成，因此需要动态编译。

使用$compile服务！ 在link方法中对返回后的html代码经过$compile服务处理后再插入：
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>