esponendo un oggetto in angularjs ambito direttiva, non può accedere alle proprietà

Question

Così, ho il seguente relativamente semplice direttiva Angularjs

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

     } 
    }); 

E qui è dove io chiamo la direttiva in HTML

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

che, dato che ogni site è un oggetto, produce questa uscita (copiato dal browser)

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

Tuttavia, se cambio il modello nella direttiva su

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

non produce alcuna uscita. Questo sembra un caso d'uso abbastanza semplice, qualche idea su cosa potrei fare male? L'output desiderato sarebbe solo il campo name in ciascun oggetto.

Answer 1

È necessario utilizzare '=' per mappare l'oggetto. '@' implica che stai passando un valore stringa al nuovo ambito.

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, 

     } 
    }); 

Poi, nel vostro codice, non utilizzare un vincolante l'attributo, basta passare l'espressione:

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