2012-10-02 4 views
13

속성 창이 생성되는 위치는 원하는 객체에 따라 달라질 수 있습니다. 그것은AngularJS 지시문 속성의 문자열이 아닌 유형

<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라는 자신의 지시에 의해 만들었습니다? 이것은 property.value이 문자열로 변환된다는 점을 제외하고는 잘 작동합니다 (DOM 요소의 속성이므로). 속성 값이 다른 데이터 형식 인 경우 어떻게해야합니까? 예를 들어 객체. (커피 스크립트에서) 구현의 나머지 부분을 참조 :

첫째,
둘째 : value.x로서

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 

를, Y 및 Z는 문자열에 정의되어, 그 결과는 물론이고
셋째,

I 원하는 출력은 :

먼저 0, 0, 42
제 0, 20, 0,321 0 셋째 1, 1,

요소를 프로그래밍 방식으로 추가하는 방법에 근본적으로 잘못된 생각이 있습니다. 이와 비슷한 것을 구현하는 각도 방식은 무엇입니까?

편집 : 솔루션

는 참조 대신 문자열 값으로 개체로 value을 참조 지시어에 = 대신 @을 사용하려면

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

그리고 템플릿 :

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

{{}}.

답변

11

name='property.name'scope: { name: '=', value: '=' }은?

마술을해야합니다.

this를 참조 더 알고에 대한 (+ F Ctrl 키를) 검색하려면 '@', 첫 번째 결과는 당신이 원하는)

+0

감사합니다! 그랬어! –

+9

이것은 때때로 바람직하지 않은 효과 인 해당 지시문에 대해 격리 된 범위를 만듭니다. – Uri

+0

나는 당신이 의미 생각 : 범위 : {이름을 '@'값 '= 이름'} 이것은 '값'해시 –

관련 문제