在angularjs指令范围内暴露一个对象,无法访问属性

Question

所以,我有以下比较简单的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>

其中,给定每个站点是一个对象,生成此输出(从浏览器复制)

但是,如果我将指令中的模板更改为


它不产生任何输出.这似乎是一个非常简单的用例,任何想法我可能做错了什么？所需的输出将只是每个对象中的名称字段.
{"name":"Hurlburt","_id":"5148bb6b79353be4app.directive('myDirective',}
  });
app.directive('myDirective',}
  });005","enclaves":[]}
 {"name":"Walker Center","_id":"5148cca5436905781a000005","enclaves":[]}
 {"name":"test1","_id":"5148ce94436905781a000006","enclaves":[]}
 {"name":"JDIF","_id":"5148cf37436905781a000007","enclaves":[]}
template: '<div>{{site.name}}</div>',

Answer 1

您需要使用’=’来映射对象. ‘@’意味着你只是传递一个字符串值到新的范围.

app.directive('myDirective',scope: {
              site: '=',//two-way binding
              index: '@' //just passing an attribute as a string.
          },}
  });

然后在标记中,不要在属性中使用绑定,只需传递表达式：

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