Tipos sin cadenas en los atributos de la directiva AngularJS

Question

Quiero crear un panel de propiedades, donde el número de propiedades puede variar según el objeto seleccionado.

he creado por la propia directiva denominada property que muestra el nombre y el valor de una propiedad, utilizando código como el siguiente:

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

simple, ¿verdad? Esto funciona bien, excepto que property.value se convertirá en una cadena (ya que es un atributo en un elemento DOM). ¿Qué debo hacer si el valor de la propiedad es algún otro tipo de datos? Por ejemplo, un objeto. Ver el resto de la aplicación (en 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 

Como value.x, Y y Z no están definidos en una cadena, el resultado es, por supuesto:

En primer lugar,,
En segundo lugar,,
En tercer lugar,,

La salida que quiero es:

Primera 0, 0, 42
Segunda 0, 20, 0
Tercero 1, 1, 1

Sospecho que hay algo fundamentalmente erróneo en mi forma de pensar sobre cómo agregar elementos mediante programación. ¿Cuál es la manera Angularish de implementar algo como esto?

EDIT: Solución

Para referirse a value como un objeto por referencia en lugar de como un valor de cadena, utilice = en lugar de @ en la directiva:

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

Y en la plantilla:

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

Tenga en cuenta que he eliminado el {{}}.

Answer 1

¿Qué hay de name='property.name' y scope: { name: '=', value: '=' }?

Esto debería hacer la magia.

Para saber más ver this y la búsqueda (Ctrl + F) para la '@', el primer resultado es lo que quiere;)