AngularJS : Customizing the template within a Directive that includes references to scoped attributes

Question

I'm trying to customize a template within a directive and include references to attributes in the parent scope. I'm pretty new to Angular but I've done a fair bit of searching and I've based my attempts on Customizing the template within a Directive. However if I pass a reference to a parent scoped variable as an attribute to the directive it doesn't get resolved, possibly because it's still undefined at the time the compile function is called.

My directive definition looks like this:

app.directive('sectionHeader', function() {
  return {
    restrict: 'EC',
    replace: true,
    transclude: true,
    scope: {sectionName:'@sectionName', imageUrl:'@imageUrl'},
    compile: function(element, attrs) {
      var imageHtml = attrs.hasOwnProperty('imageUrl') ? '<div style="float: left; padding-right: 5px;"><img class="float_left" src="' + attrs.imageUrl + '" alt=""/></div>' : '';
      var htmlText =
        '<div>' + imageHtml + '<h1 class="float-left">' + attrs.sectionName + '</h1>' +
        '<div class="clear"></div>' +
        '<div class="modal_hr"></div></div>';
      element.replaceWith(htmlText);
    },
  };
});

And I'm using the directive like this:

 <div class="section-header" section-name="{{currentFeatureName}}"></div>

The problem is the {{currentFeatureName}} variable from my controller doesn't appear to be defined when the compile function is called on the directive.

One way I've considered to get around this is within the compile function set up an observer function on the sectionName attribute that updates h1 element content when it sees a change. This seems a little clunky and I was wondering if there is a better or more elegant way of doing this.

Stewie · Accepted Answer · 2013-03-07 21:00:20Z

Check out the $observe function in Directive docs.

But beside that, there actually seems to be no need to do what you were trying to do. See:

var app = angular.module('plunker', []);
app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.currentFeatureName = 'Current Feature Name';
        $scope.imageUrl = "https://lh3.googleusercontent.com/GYSBZh5RpCFwTU6db0JlHfOr_f-RWvSQwP505d0ZjWfqoovT3SYxIUPOCbUZNhLeN9EDRK3b2g=s128-h128-e365";
      }
    ]
  );

app.directive('sectionHeader', function() {
  return {
    restrict: 'EC',
    replace: true,
    transclude: true,
    scope: {
      sectionName:'@',
      imageUrl:'@'
    },
    template: '<div><div style="float: left; padding-right: 5px;" ng-show="imageUrl"><img class="float_left" ng-src="{{imageUrl}}" alt=""/></div><h1 class="float-left">{{sectionName}}</h1><div class="clear"></div><div class="modal_hr"></div></div>'
  };
});

HTML:

<div ng-controller="AppController">
  <div class="section-header" section-name="{{currentFeatureName}}" image-url="{{imageUrl}}"></div>
</div>

Plunker.

Josh David Miller · Accepted Answer · 2013-03-07 20:55:19Z

1

You are correct on why this isn't working. Interpolated attributes are not available when the compile and link functions run because no digest has occurred yet to resolve the interpolation to a value. You can read more about this here. You are also right about the solution: use attrs.$observe( 'sectionName', function ( val ) { ... });

However, it doesn't look like you need a dynamic template. If this was your template:

<div>
  <div style="float: left; padding-right: 5px;" ng-show="{{imageUrl}}">
    <img class="float_left" ng-src="{{imageUrl}}" alt="" />
  </div>
  <h1 class="float-left">{{sectionName}}</h1>
  <div class="clear"></div>
  <div class="modal_hr"></div>
</div>

Then you wouldn't need any logic in a compile or link function. Perhaps this pattern will also help you.

answered Mar 7, 2013 at 20:55

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

5 Comments

Dean Ashby Over a year ago

Thanks Josh, your answer is essentially the same as Stewie's but he beat you to it by a few minutes. If I was needing to conditionally add just a single attribute to one of the tags rather than including a tag as a whole then I guess I would have to fall back to using the $observe approach.

Josh David Miller Over a year ago

Actually, I beat him by 5 minutes according to the footer of the answer, but it doesn't really matter. :-)

Dean Ashby Over a year ago

Oops, my mistake, sorry about that.

Stewie Over a year ago

@JoshDavidMiller was there first, and he actually managed to answer another question simultaneously. I sometimes think Josh is a bot. :-)

Josh David Miller Over a year ago

@stewie Haha! There - bots don't laugh. Or plot revenge. ... Right?

Collectives™ on Stack Overflow

AngularJS : Customizing the template within a Directive that includes references to scoped attributes

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