如何在 select 数据的指令中使用属性

Question

我正在尝试创建一个指令元素，它使用属性值来发出 http 请求并打印响应。使用属性值发出 http 请求的部分通过在与指令关联的控制器中使用 $attrs 来实现。但是，如果我试图在同一文档中输出具有 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 请求。我不知道如何解决这个问题。

这是我的 angular 代码（在 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>

问题

我认为这可能与指令的 "scope" 属性有关，但是我尝试了所有不同的版本（'='、'@'、'<'、' &'), 但我无法让它工作。

你能帮帮我吗？

Answer 1

您的假设是正确的，它与指令中的范围属性有关。你需要这个来让它工作：

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

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

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

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

如何在 select 数据的指令中使用属性

How to use an attribute in a directive to select data

javascript

angularjs

angularjs-directive