ein Objekt in AngularJS Richtlinie Umfang ausgesetzt wird, kann nicht Eigenschaften zugreifen

Question

Also, ich habe

in HTML die folgenden relativ einfachen AngularJS Richtlinie

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

     } 
    }); 

Und hier ist, wo ich die Richtlinie nennen

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

Welche, da jeder site ein Objekt ist, erzeugt diese Ausgabe (vom Browser kopiert)

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

Wenn ich jedoch die Vorlage in der Direktive zu

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

ändere, produziert es keinen Ausgang. Das scheint ein ziemlich unkomplizierter Anwendungsfall zu sein, irgendwelche Ideen, was ich falsch machen könnte? Die gewünschte Ausgabe wäre nur das Feld name in jedem Objekt.

Answer 1

Sie müssen '=' verwenden, um das Objekt zuzuordnen. '@' bedeutet, dass Sie nur einen Zeichenfolgenwert an den neuen Bereich übergeben.

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, 

     } 
    }); 

Dann in Ihrem Markup, keine Bindung in dem Attribute verwenden, geben Sie einfach den Ausdruck:

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