ディレクティブで属性を使用してデータを選択する方法

Question

属性の値を使用してhttp要求を行い、応答を出力するディレクティブ要素を作成しようとしています。 httpリクエストを行うために属性の値を使用する部分は、ディレクティブに関連付けられたコントローラの$ attrsを使用してカバーされます。しかし、3つの異なる属性値を持つデータを同じドキュメントに出力しようとすると、すべてのディレクティブが同じデータを出力します。 } example.com/{person-numberから

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

マイデータ：私は基本的に私が何をしたいのか私の問題

を証明するために私のコードのPlunkerを行った

はこれです：

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

質問

私はそれはとは何かを持っているかもしれないと思いますしかし、このディレクティブの "scope"プロパティは、すべての異なるバージョン（ '='、 '@'、 '< '、' & '）、それを動作させることはできません。

私を助けてもらえますか？

Answer 1

あなたは、ディレクティブのscopeプロパティと関係があるという前提で正しいです。あなたは、これはそれを動作させる必要があります。

{ 
    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で新しいスコープを割り当てました。これは、ディレクティブのインスタンスごとに固有の有効範囲です。