How can I access an elements value using an angular.js directive?

Question

If I have a directive for a table cell called

<table>
  <tr>
    <td cellDirective>Some cell Value</td>
    <td cellDirective>Another cell value</td>
    ...
  <tr> ...
<table>

defined by

myapp = angular.module('myapp', []);
myapp.directive('cellDirective', function() {
  return {
    link: function(scope, element) {
        console.log(element);
        element.addClass("coloring-class");
    }
  };
});

with the style

<style>
  .coloring-class {
    color: blue;
  }
</style>

What I get in the console is a reference to an object with a ton of different attributes, but I cannot find one with the value in each cell. So how can I access the value inside an element?

rajasaur · Accepted Answer · 2013-07-20 04:44:57Z

1

As per your JSBin, if you have the cell defined as

<td ng-repeat="cell in row" class="spreadsheet" cell="{{ cell }}">

you can define your directive as

clinApp.directive('cell', function() {
  return {
    restrict: 'AE',
    link: function(scope, element, attrs)  {
      console.log(attrs.cell);

attrs contains all the attributes in the current element where the directive is placed.

answered Jul 20, 2013 at 4:44

rajasaur

5,4902 gold badges29 silver badges23 bronze badges

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

1 Comment

user1876508 Over a year ago

That just returns undefined. You can check my changes to the bin, but I added console.log(attrs.cell) and the attrs parameter into my linking function.

Mike Robinson · Accepted Answer · 2013-07-19 22:32:09Z

0

It's just good old fashioned jQuery:

console.log(element.text());

answered Jul 19, 2013 at 22:32

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

3 Comments

user1876508 Over a year ago

how can I do this without jquery? I have an ng-repeat where the cell values are denoted {{ cell }}, and this function returns the text {{ cell }}. You can access this at jsbin.com/usecuf/13

Mike Robinson Over a year ago

So your example is a little different from the question. You can do one of two things - either use transclusion (docs.angularjs.org/guide/directive) to pass HTML into the directive, or define a template on the directive which contains {{cell}}.

Mike Robinson Over a year ago

Just to point out, the directive documentation on Angular is very dense but the examples are accurate. It took me a couple (very slow) reads before I understood building directives.

Collectives™ on Stack Overflow

How can I access an elements value using an angular.js directive?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related