我想创建一个属性窗格，其中属性的数量可能会因选择的对象而异。
我创建了自己的指令，调用property显示属性的名称和值，使用如下代码：
<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>
很简单，不是吗？这工作得很好，除了property.value将被转换为字符串（因为它是 DOM 元素上的属性）。如果属性值是其他数据类型，我该怎么办？例如一个对象。查看实现的其余部分（在 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
由于 value.x、y 和 z 在字符串上未定义，结果当然是：
一、
二、
三、
我想要的输出是：
第一个 0, 0, 42
第二个 0, 20, 0
第三个 1, 1, 1
我怀疑我对如何以编程方式添加元素的想法存在根本性的错误。实现这样的东西的 Angularish 方式是什么？
编辑：解决方案
要value通过引用而不是字符串值来引用对象，请在指令中使用=代替：@
scope: {name: '@', value: '='}
在模板中：
<property name="{{property.name}}" value="property.value">
请注意，我删除了{{}}.