AngularJS指令属性中的非字符串类型

Question

我想创建一个属性窗格,其中属性的数量可以根据选择的对象而变化.

我已经通过自己的指令创建了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">

请注意,我删除了{{}}.

Answer 1

怎么样name='property.name'和scope: { name: '=', value: '=' }？

这应该是神奇的.

要了解更多看到这和搜索(按Ctrl + F)为"@",第一个结果是你想要的东西;)