Я хочу создать панель свойств, где количество свойств может варьироваться в зависимости от того, какой объект выбран.
Я создал собственную директиву под названием 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
В качестве значения .x, y и z undefined в строке, результат, конечно же:
Во-первых,
Во-вторых,
В-третьих,
Выход, который я хочу:
Первые 0, 0, 42
Второй 0, 20, 0
Третий 1, 1, 1
Я подозреваю, что что-то принципиально неправильно в моем мышлении о том, как программно добавлять элементы. Что такое угловатый способ реализовать что-то вроде этого?
EDIT: решение
Чтобы ссылаться на value
как на объект по ссылке вместо строкового значения, используйте =
вместо @
в директиве:
scope: {name: '@', value: '='}
И в шаблоне:
<property name="{{property.name}}" value="property.value">
Обратите внимание, что я удалил {{}}
.