Question

Angular newbie here. Trying to wrap my head around directives, scopes, transclusions, and what not.

Here’s what I’m trying to achieve — each table in a cell needs to be color-coded (change in bgcolor OR addition of a specific CSS class) based on the value inside that cell. The complication is that the cell does not have a bare value – it has other bits & baubles along with it. Therefore, within the cell, I would like to have the ability to add custom HTML.

Here’s what my template looks like:

<span color-codify="{'max' : object.max, 'value' : object.value}" ng-transclude>
  {{ object.value }}
  <a href="#">Edit</a> | <a href="#">Delete</a>
</span>

Here’s what my directive looks like:

myModule.directive('colorCodify', function() {
  return {
    restrict: 'A',
    transclude: 'true',
    'link' : function(scope, element, attrs, controller) {
      var opts = scope.$eval(attrs.colorCodify);
      console.log(opts); // THIS DISPLAYs {max: undefined, value: undefined} 
    }
  }
});

The surprising part is, that even though {{ object.value }} within the <span> element renders correctly, it is not being passed down to the directive properly. However, if I refer to $parent it works properly. Example:

<span color-codify="{'max' : $parent.object.max, 'value' : $parent.object.value}" ng-transclude></span>

What’s going on?

Answer 1

<span color-codify="{'max' : object.max, 'value' : object.value}" ng-transclude>
  {{ object.value }}
  <a href="#">Edit</a> | <a href="#">Delete</a>
</span>

.

myModule.directive('colorCodify', function() {
  return {
    restrict: 'A',
    transclude: 'true',
    scope: {getOpts: "&colorCodify"},
    'link' : function(scope, element, attrs, controller) {
      var opts = scope.getOpts();
      console.log(opts);
    }
  }
});

For more info, check out directive definition object part in http://docs.angularjs.org/guide/directive

Edit about $parent:

I suppose you need to read more about how scopes work in angular (how do they inherit from one another and how do they override those inherited properties). This would be one of the most important aspects in angularjs. I suggest you to follow the links and read them again and again until you get it.

ngScope Documentation Reference
Developer Guide
Bonus (video from angularjs team, discussing angularjs’ best practises):
Youtube