javascript - 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，它基本上是为了在作用域链接到指令元素时提供对 Angular 编译的 DOM 的控制。您可以在指令中使用 html over 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