angularjs - ng-repeat 范围不适用于其中的指令

Question

我有一个由 ng-repeat 重复的指令。

<div ng-repeat="p in people">
  <p>{{p.name.first}}</p>
  <slider-box
    title-text="{{p.name.first}}"
    body-text="Some body text"
    img-src="{{p.photo}}"
    more-link="#"></slider-box>   
  </div>
</div>

如果我<p>{{p.name.first}}</p>在指令前加上 a ，则p显示名字，但slider-box似乎无法访问p，因此由于没有数据提供给它，因此显示为空白。

这可能不是异步问题，因为正在创建框，所以 Angular 知道有一些东西ng-repeat，并且<p>正在填充。

我在这里创建了一个示例站点，该站点显示了带有虚拟数据（只是字符串）的指令示例，然后重复的在其下方。

这里提出了一个非常相似的问题，但没有发布代码示例，而且线索似乎已经死了。

Answer 1

您应该在指令声明中直接将属性传递到作用域中。

在您的指令声明中，不仅仅是拥有scope: {}，而是拥有类似scope:{ imgSrc:"@" }. 它将直接在指令的隔离范围内传递属性的值。

看看这个简短的教程以获得更好的解释。