Keine String-Typen in den AngularJS-Direktivitätsattributen

Question

Ich möchte einen Eigenschaftsbereich erstellen, in dem die Anzahl der Eigenschaften je nach ausgewähltem Objekt variieren kann.

Ich habe durch eigene Richtlinie erstellt property genannt, die den Namen und den Wert einer Eigenschaft zeigt, wie dies mit dem Code:

<div ng-app="MyApp"> 
    <div class="properties-pane" ng-controller="PropertiesPane"> 
    <div ng-repeat="property in properties"> 
     <property name="{{property.name}}" value="{{property.value}}"> 
    </div> 
    </div> 
</div> 

Einfach, es ist nicht wahr? Dies funktioniert problemlos, außer dass property.value in eine Zeichenfolge konvertiert wird (da es ein Attribut für ein DOM-Element ist). Was soll ich tun, wenn der Eigenschaftswert ein anderer Datentyp ist? Zum Beispiel ein Objekt. Sehen Sie den Rest der Umsetzung (in Coffeescript):

MyApp = angular.module('MyApp', []) 

MyApp.controller 'PropertiesPane', ($scope) -> 
    $scope.properties = [ 
    # Note that value is an object, not a string: 
    {name: 'First', value: {x:0, y:0, z:42}}, 
    {name: 'Second', value: {x:0, y:20, z:0}}, 
    {name: 'Third', value: {x:1, y:1, z:1}}, 
    ] 

MyApp.directive 'property', ($compile) -> 
    restrict: 'E' 
    transclude: false 
    replace: true 
    scope: {name: '@name', value: '@value'} 
    template: '<div>{{name}} {{value.x}}, {{value.y}}, {{value.z}}</div>' 
    #       ^^^^^^^  ^^^^^^^  ^^^^^^^ 
    # this doesn't work as value is a string, not an object 

Als value.x, y und z auf einer Schnur nicht definiert sind, ist das Ergebnis natürlich:

Erstens,
Zweitens,
Drittens,

Der Ausgang ich will, ist:

Erste 0, 0, 42
Zweite 0, 20, 0
Third 1, 1, 1

Ich vermute, dass etwas grundsätzlich falsch ist, wenn ich daran denke, wie man Elemente programmatisch hinzufügt. Was ist der Angularish-Weg, um so etwas zu implementieren?

EDIT: Lösung

Um zu value als Objekt durch Bezugnahme beziehen und nicht als String-Wert, verwenden = statt @ in der Richtlinie:

scope: {name: '@', value: '='} 

Und in der Vorlage:

<property name="{{property.name}}" value="property.value"> 

Bitte beachte, dass ich dieentfernt 210.

Answer 1

Was ist mit name='property.name' und scope: { name: '=', value: '=' }?

Dies sollte die Magie tun.

mehr wissen this sehen und suchen (Strg + F) für '@', das erste Ergebnis ist, was Sie wollen;)