Подтвердить что ты не робот

Нестроковые типы в атрибутах директивы AngularJS

Я хочу создать панель свойств, где количество свойств может варьироваться в зависимости от того, какой объект выбран.

Я создал собственную директиву под названием 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">

Обратите внимание, что я удалил {{}}.

4b9b3361

Ответ 1

Как насчет name='property.name' и scope: { name: '=', value: '=' }?

Это должно сделать магию.

Чтобы узнать больше, смотрите this и search (ctrl + f) для '@', первый результат - то, что вы хотите;)