我通过angular生成出这样一个模板

app.directive('cookButton',function(){
        return {
            restrict: 'E',
            template: '<section></section>',
            replace: true,
            link: function(scope,element,attrs){
                data.cookdata = data.dataCookArray[data.dataCookArray.length-1];
                element.append(
                    '<p data-id='+cookdata.id+'>'
                        +'<button type="button" class="btn btn-orange btn-lg">'
                            +'<span></span>'
                            +'<section>'+cookdata.name+'<strong>'+cookdata.numgood+'好评</strong></section>'
                        +'</button>'
                        +'<button type="button" class="btn btn-default btn-lg">'
                            +'<span></span>'
                            +'<section>'+cookdata.name+'<strong>'+cookdata.numbad+'差评</strong></section>'
                        +'</button>'

                    +'</p>'
                );
            }
        };
    });

然后我想在一个dom元素中这样做

$('.review_button').append(<cook-button></cook-button>);

结果标签被添加到了dom元素里，但是cook-button却并没有被编译，请问这是为什么，谢谢了。