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?

Answer 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.

Answer 2

It's just good old fashioned jQuery:

console.log(element.text());