AngularJS Директива не делает шаблон

Question

мой взгляд прост:

<job-template ng-if="job"></job-template> 

Моя директива:

.directive('jobTemplate', function(){ 
    return { 
    restrict: 'AE', 
    replace: true, 
    link: function(scope,element, attrs) { 
     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>"; 
     console.log("text"); 
     console.log(text); 
     return text; 
    } 
    }; 

}) 

Когда я запускаю мою страницу, мой <job-template> элемент не заменяется ничем - хотя правильный text загружен на консоль.

Что я здесь сделал неправильно?

Answer 1

link Функция не предназначена для возврата HTML-кода, как вы думаете. Оно в основном предназначено для обеспечения контроля над угловым скомпилированным DOM, когда область действия связана с директивным элементом. У вас может быть html над опцией template/templateUrl в директиве. Используйте 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

Попробуйте этот код 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); 
} 
}; 
})