我已经创建了自己的指令称为属性,显示属性的名称和值,使用如下代码：

<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',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,42号
第二个0,20,0
第三,1,1

我怀疑在我如何编程添加元素的想法中有一些根本错误.什么是倾斜的方式来实现这样的东西？

编辑：解决方案

通过引用而不是作为字符串值将值作为对象引用,在指令中使用=而不是@：

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

并在模板中：

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

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