AngularJS指令が私の見解は単純ですテンプレート

Question

をレンダリングされていません正しいtextがコンソールにロードされます。

私はここで何が間違っていますか？

Answer 1

link関数は、あなたが考えているようにHTMLを返すためのものではありません。スコープがディレクティブ要素にリンクされている場合、角コンパイルされたDOMを制御することを基本的に意図しています。あなたは指示のtemplate/templateUrlオプション以上のHTMLを持つことができます。条件付き要素を使用する場合はng-ifを使用します。

指令

.directive('jobTemplate', function() { 
    return { 
    restrict: 'AE', 
    replace: true, 
    template: '<p>'+ 
     '<span ng-if="job.JobStatus == \'Created\'">{{job.id}} was created.</span>'+ 
     '<span ng-if="job.JobStatus == \'Processing\'">{{job.id}} is currently processing.</span>'+ 
     '</p>', 
    link: function(scope, element, attrs) {} 
    }; 

}) 

Demo here

Answer 2

あなたが実装されている方法は、あなたがDOMの一部を追加または削除条件ままにする必要がありcorrect..butでこのコードhttps://plnkr.co/edit/cpdAqWN0SeUx5Gy9CQkR?p=preview

app.directive('jobTemplate', function($compile){ 
    return { 
restrict: 'AE', 
replace: true, 
link: function(scope,element, attrs) { 
    console.log(element) 
    var JobStatus = scope.job.JobStatus; 
    var text = "<p>"; 

    if(JobStatus === 'Created'){ 
     text += "{{job.id}} was created." 
    } 

    else if(JobStatus === 'Processing'){ 
     text += "{{job.id}} is currently processing." 
    } 

    text += "</p>"; 
    element.html(text); 
    $compile(element.contents())(scope); 
} 
}; 
})