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,3,1，

我怀疑在思考如何以编程方式添加元素方面存在根本性的错误。什么是Angularish实现这样的方式？

编辑：解决方案

要通过引用而不是字符串值将value称为对象，请在指令中使用=而不是@：

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

在模板中：

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

请注意，我删除了{{}}。

Answer 1

name='property.name'和scope: { name: '=', value: '=' }呢？

这应该是神奇的。

要了解更多信息，请参阅this并搜索（ctrl + f）代表'@'，第一个结果是您想要的;）

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

1 个答案: