Wie verwendet man ein Attribut in einer Direktive, um Daten auszuwählen

Question

Ich versuche, ein direction-Element zu erstellen, das den Wert eines Attributs benutzt, um eine http-Anfrage zu machen und die Antwort auszudrucken. Der Teil, der den Wert des Attributs verwendet, um eine http-Anfrage zu stellen, wird durch Verwendung der $ attrs in einem Controller abgedeckt, der mit der Direktive assoziiert ist. Wenn ich jedoch versuche, die Daten mit drei verschiedenen Attributwerten im selben Dokument auszugeben, geben alle Anweisungen die gleichen Daten aus.

ich gemacht habe ein Plunker meines Codes mein Problem

Grundsätzlich zu zeigen, was soll ich tun, um, ist dies:

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

Meine Daten von example.com/{person-number} :

Person 1:

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

Person 2:

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

Person 3:

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

gewünschte Ausgabe:

John: New York 

Bob: Los Angeles 

Jay: San Diego 

Was erhalte ich:

Jay: San Diego 

Jay: San Diego 

Jay: San Diego 

Was Sie sehen, ist, dass alle Werte auf die letzte HTTP-Anfrage geändert haben. Ich weiß nicht, wie ich das beheben soll.

Hier ist mein Winkelcode (auch sichtbar in 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' 
    }; 
    } 
); 

und meine Vorlage:

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

Frage

ich denke, es etwas damit zu tun haben könnte, die "scope" Eigenschaft der Direktive, jedoch habe ich alle verschiedenen Versionen ('=', '@', '< ',' & '), aber ich kann es nicht zur Arbeit bringen.

Könnten Sie mir bitte helfen?

Answer 1

Sie haben Ihre Annahme richtig, dass es sich um die Eigenschaft scope in der Direktive handelt. Sie müssen dies es Arbeit bilden:

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

aktualisiert Plunker - https://plnkr.co/edit/i4anaSJsSq8iKGgHo7eK?p=preview

Der Grund, dies wurde versagte, bevor Ihr Umfang Eigentum der Richtlinie Descriptor das Hinzufügen, deren Umfang war, dass der umgebenden Vorlage, wenn die Richtlinie wurde erklärt.Da der Bereich zwischen allen Instanzen der Direktive aufgeteilt wird, wird der letzte zugewiesene für alle zugewiesen. In diesem Fall person3 wurde letzten person-number zugewiesen, daher betrachten alle 3 Instanzen den ursprünglichen Wert person-number des Bereichs.

Isolieren Sie den Bereich, wenn Sie dem Bereich ein Objekt zuweisen. In diesem Fall habe ich einen neuen Bereich mit der personNumber zugewiesen. Dies ist ein eindeutiger Bereich pro Instanz der Richtlinie.