AngularJS指令屬性中的非字符串類型

我想創建一個屬性窗格，其中屬性的數量可以根據所選對象而變化。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

由於value.x，y和z上的繩子不確定的，其結果當然是：

首先，
其次，
第三，

我想要的輸出是：

首先0，0，42
秒0，20，0
第三個1,1,1

我懷疑在如何編程添加元素的過程中存在根本性錯誤。什麼是Angularish方式來實現這樣的事情？

編輯：解

要引用value作爲對象通過引用而不是作爲一個字符串值，在指令中使用=代替@：

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

而在模板：

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

請注意，我刪除了{{}}。

來源

2012-10-02 Martin Vilcans

name='property.name'和scope: { name: '=', value: '=' }怎麼樣？

這應該是神奇的。

要了解更多看到this和搜索（按Ctrl + F）爲 '@'，第一個結果是你想要的東西;）

來源

2012-10-02 14:52:38

謝謝！那樣做了！ –

這會爲該指令創建一個單獨的作用域，有時候這是一種不希望的效果。 – Uri

我想你的意思是：範圍：{名稱：「@」，值：「=名字」} 這將在「值」哈希 –

AngularJS指令屬性中的非字符串類型

回答

相關問題