javascript - angular.js ディレクティブを使用して要素の値にアクセスするにはどうすればよいですか?

Question

と呼ばれるテーブルセルのディレクティブがある場合

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

によって定義されます

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

スタイルと

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

コンソールに表示されるのは、さまざまな属性を持つオブジェクトへの参照ですが、各セルに値を持つオブジェクトが見つかりません。では、要素内の値にアクセスするにはどうすればよいでしょうか?

Answer 1

あなたのJSBinに従って、セルが次のように定義されている場合

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

ディレクティブを次のように定義できます

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

attrs には、ディレクティブが配置されている現在の要素のすべての属性が含まれます。

Answer 2

それは古き良き時代のjQueryです：

console.log(element.text());