Javascript 如何使用指令中的属性选择数据

我试图创建一个指令元素，它使用属性的值来发出http请求并打印响应。在与该指令相关联的控制器中使用$attrs可以完成使用属性值发出http请求的部分。但是，如果我试图在同一文档中输出具有3个不同属性值的数据，则所有指令都会输出相同的数据

我已经对我的代码做了一个演示，以演示我的问题

基本上我想做的是：

<person personNumber='person1'></person>
<person personNumber='person2'></person>
<person personNumber='person3'></person>

John: New York

Bob: Los Angeles

Jay: San Diego

Jay: San Diego

Jay: San Diego

Jay: San Diego

第2人：

第3人：

想要的输出：

<person personNumber='person1'></person>
<person personNumber='person2'></person>
<person personNumber='person3'></person>

John: New York

Bob: Los Angeles

Jay: San Diego

Jay: San Diego

Jay: San Diego

Jay: San Diego

我得到的：

<person personNumber='person1'></person>
<person personNumber='person2'></person>
<person personNumber='person3'></person>

John: New York

Bob: Los Angeles

Jay: San Diego

Jay: San Diego

Jay: San Diego

Jay: San Diego

您看到的是，所有值都已更改为最后一个http请求。我不知道怎么解决这个问题

这是我的角度代码（在中也可见）：

和我的模板：

<p>{{person.info.name}}: {{person.info.city}} </p>

{{person.info.name}:{{{person.info.city}

问题

---

我认为它可能与指令的“scope”属性有关，但是我尝试了所有不同的版本（“=”、“@”、“），您的假设是正确的，它与指令中的scope属性有关。您需要这样才能使它工作：

{
  restrict: 'E',
  templateUrl: 'template.html',
  controller: 'personController',
  controllerAs: 'person',
  scope: {
    personNumber:'='
  }
}; 

更新的plunker-

失败的原因是在将scope属性添加到指令描述符之前，它的作用域是声明该指令的周围模板的作用域。因此，由于它在该指令的所有实例之间共享作用域，因此最后分配的作用域将分配给所有实例。在本例中，

person3

是最后分配的到

人员编号

，因此所有3个实例都在查看原始范围的

人员编号

值

---

隔离作用域是指将对象分配给作用域时发生的情况。在本例中，我已使用

personNumber

分配了一个新作用域。这是指令每个实例的唯一作用域。

感谢您的解决方案！