13

選択したオブジェクトによってプロパティの数が異なるプロパティ ペインを作成したいと考えています。

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 は文字列で定義されていないため、結果はもちろん次のようになります。

最初 , ,
2 番目 , ,
3 番目 , ,

私が望む出力は次のとおりです。

最初の 0、0、42
2 番目の 0、20、0
3 番目の 1、1、1

プログラムで要素を追加する方法についての私の考えには、何か根本的な間違いがあるのではないかと思います。このようなものを実装するAngularishの方法は何ですか?

編集：解決策

value文字列値ではなく参照によるオブジェクトとして参照するには、ディレクティブで=代わりに使用します。@

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

そしてテンプレートで：

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

を削除したことに注意してください{{}}。

4

1 に答える 1

11

name='property.name'とはどうscope: { name: '=', value: '=' }ですか？

これで魔法がかかるはずです。

詳細については、これを参照して '@' を検索 (ctrl+f) してください。最初の結果はあなたが望むものです ;)

于 2012-10-02T14:52:38.280 に答える