Question

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

我已经制作了Plunker我的代码以证明我的问题

基本上我想做的是：

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

我的数据来自example.com/{person-number}：

第1人：

 {
   name: "John",
   city: "New York"
 }

第2人：

 {
      name: "Bob",
      city: "Los Angeles"
 }

第3人：

 {
      name: "Jay",
      city: "San Diego"
 }

通缉输出：

John: New York

Bob: Los Angeles

Jay: San Diego

我得到了什么：

Jay: San Diego

Jay: San Diego

Jay: San Diego

您看到的是所有值都已更改为上一个http请求。我不知道如何解决这个问题。

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

var app = angular.module('app', []);

app.controller('personController', ['$scope', '$attrs', function($scope, $attrs) {
    //mock json response
    var people = {
      person1: {
        name: "John",
        city: "New York"
      },
      person2: {
        name: "Bob",
        city: "Los Angeles"
      },
      person3: {
        name: "Jay",
        city: "San Diego"
      }
    };

    //mock $http.get to an api with url (www.example.com/{person})
    var self = this;
    function mockHttpGetService() {
      self.info = people[$attrs.personNumber];
    }
    mockHttpGetService();
  }
]);

app.directive('person', function() {
    return {
      restrict: 'E',
      templateUrl: 'template.html',
      controller: 'personController',
      controllerAs: 'person'
    };
  }
);

和我的模板：

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

问题

我认为它可能与指令的“范围”属性有关，但是我尝试了所有不同的版本（'='，'@'，'＆lt;'，'＆amp;'），但我我无法让它发挥作用。

你能帮我吗？

Answer 1

您认为它与指令中的scope属性有关，这是正确的。你需要它才能使它工作：

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

更新了plunker - https://plnkr.co/edit/i4anaSJsSq8iKGgHo7eK?p=preview

失败的原因是在将scope属性添加到指令描述符之前，其范围是声明指令的周围模板的范围。因此，由于它在指令的所有实例之间共享范围，所以为所有实例分配最后一个指定的实例。在这种情况下，person3最后分配到person-number，因此所有3个实例都在查看原始范围的person-number值。

隔离范围是将对象分配给范围时发生的情况。在这种情况下，我已为personNumber分配了一个新范围。这是指令的每个实例的唯一范围。

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

1 个答案: