AngularJS Directive isn't rendering template

Question

My view is simple:

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

My directive:

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

})

When I run my page, my <job-template> element isn't replaced with anything - although the correct text is loaded to the console.

What have I done wrong here?

Pankaj Parkar · Accepted Answer · 2016-03-25 20:22:25Z

3

link function isn't meant to used for returning a HTML as you are thinking, It is basically meant to be there, to provide control over angular compiled DOM, when scope is linked to directive element. You could have html over template/templateUrl option in directive. Use ng-if for having conditional element.

Directive

.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

edited Mar 25, 2016 at 20:22

answered Mar 25, 2016 at 7:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun · Accepted Answer · 2016-03-25 08:30:37Z

0

Try this 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);
 }
};
})

answered Mar 25, 2016 at 8:30

Arun

1,1856 silver badges12 bronze badges

5 Comments

Pankaj Parkar Over a year ago

the way you are implemented is correct..but you should left conditional adding or removing part of DOM should using ng-if, so that wouldn't make a problem if job value will loaded by an ajax.

Arun Over a year ago

We can do this too within directive. Previously i made with the wordpress SPA. It's too much long directive so not possible to mention those all things but i managed by using scope.$watch('$viewContentLoaded', function(){}) within directive.

Pankaj Parkar Over a year ago

$watch on $viewContentLoaded loaded wouldn't work too..you need to specifically place a watch over job, but that would be an bad practice to have $watch in code.. Try to avoid watchers so that code will be more cleaner..

Arun Over a year ago

Yup agree with you. Sometime different environment and technology don't allow than this. In my case wordpress is totally useless but client choose that only technology and he never left option for me.

Pankaj Parkar Over a year ago

that's why I said you are correct.but that will only work with static data as you mentioned..

Collectives™ on Stack Overflow

AngularJS Directive isn't rendering template

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related