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

考虑到每个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字段。

- user1048378

---

你的指令是否允许用户更改“site”数据，还是会在作用域上创建自己的属性？如果不是，那么你可能不需要隔离作用域——你可以节省一些内存，并让指令使用ng-repeat创建的作用域。 - Mark Rajcok

Answer 1

你需要使用'='来映射对象。'@'表示你只是将一个字符串值传递到新作用域。

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>

- Ben Lesh