AngularJS Richtlinie rendert nicht Vorlage

Question

Meine Ansicht ist einfach:

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

Meine Richtlinie:

.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; 
    } 
    }; 

}) 

Wenn ich meine Seite laufen, mein <job-template> Element nicht mit nichts zu ersetzen - auch wenn die Korrekt text wird in die Konsole geladen.

Was habe ich hier falsch gemacht?

Answer 1

link Funktion ist nicht für die Rückgabe eines HTML gedacht, wie Sie denken, es ist im Grunde gemeint, da zu sein, um Kontrolle über angular kompilierte DOM, wenn der Bereich mit Direktive Element verknüpft ist. Sie könnten html über template/templateUrl Option in Direktive haben. Verwenden Sie ng-if für bedingte Element.

Richtlinie

.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

Versuchen Sie diesen Code 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); 
} 
}; 
})