16

だから、私は次の比較的単純なAngularjsディレクティブを持っています

app.directive('myDirective', function () {
      return {
          restrict: 'E',
          scope: {
              site: '@',
              index: '@'
          },
          template: '<div>{{site}}</div>',
          replace: true,

      }
  });

そしてここで私はHTMLでディレクティブを呼び出します

<div id="eventGraphic" class="span12">
    <my-directive ng-repeat="site in IEvent.sites" site="{{site}}" index="{{$index}}"></my-directive>
</div>

それぞれsiteがオブジェクトであるとすると、これはこの出力を生成します（ブラウザーからコピーされます）

{"name":"Hurlburt","_id":"5148bb6b79353be406000005","enclaves":[]}
{"name":"Walker Center","_id":"5148cca5436905781a000005","enclaves":[]}
{"name":"test1","_id":"5148ce94436905781a000006","enclaves":[]}
{"name":"JDIF","_id":"5148cf37436905781a000007","enclaves":[]}

ただし、ディレクティブのテンプレートを次のように変更すると

 template: '<div>{{site.name}}</div>',

出力は生成されません。これはかなり単純なユースケースのようですが、私が間違っている可能性のあるアイデアはありますか？必要な出力はname、各オブジェクトのフィールドだけです。

4

1 に答える 1

21

'='オブジェクトをマップするためにを使用する必要があります。'@'文字列値を新しいスコープに渡すだけであることを意味します。

app.directive('myDirective', function () {
      return {
          restrict: 'E',
          scope: {
              site: '=', //two-way binding
              index: '@' //just passing an attribute as a string.
          },
          template: '<div>{{site}}</div>',
          replace: true,

      }
  });

次に、マークアップで、属性にバインディングを使用せず、式を渡すだけです。

<div id="eventGraphic" class="span12">
    <!-- below, site="site" is passing the expression (site) to
         the two way binding for your directive's scope,
         whereas index="{{$index}}" is actually evaluating the expression
         ($index) and passing it as a string to the index attribute,
         which is being put directly into the directive's scope as a string -->
    <my-directive ng-repeat="site in IEvent.sites" 
            site="site" 
            index="{{$index}}"></my-directive>
</div>
于 2013-03-20T19:03:42.597 に答える