AngularJS - Evaluating options to a directive in the correct scope

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?

Umur Kontacı · Accepted Answer · 2013-01-26 08:16:04Z

4

<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

edited Jan 26, 2013 at 8:16

answered Jan 22, 2013 at 7:12

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

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

10 Comments

Saurabh Nanda Over a year ago

It this what you're referring to? "& or &attr - provides a way to execute an expression in the context of the parent scope."

Saurabh Nanda Over a year ago

Also, could you explain to me why, in my example, why color-codify="{'max' : $parent.object.max, 'value' : $parent.object.value}" works while color-codify="{'max' : object.max, 'value' : object.value}" doesn't?

Umur Kontacı Over a year ago

Yes. It does return a function wrapper to be called in the parent context.

Umur Kontacı Over a year ago

It means you are creating a new child scope, where you cannot access object without jumping to parent. a full jsfiddle might help.ç

Saurabh Nanda Over a year ago

Thank you fastreload for taking the time to post this answer and the comments. I'm going through the Angular developer guide and the best practices video right now. Hope it gives me a clearer picture.

|

Collectives™ on Stack Overflow

AngularJS - Evaluating options to a directive in the correct scope

1 Answer 1

Edit about $parent:

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit about $parent:

10 Comments

Linked

Related