AngularJS - 지시어의 범위 변경

Question

HTML 조각을 다시 사용할 수 있도록 각도 지시문을 설정하려고합니다. 나는 이것을 달성 할 수 있었지만, 내가 직면하고있는 문제는 HTML을 포함하는 템플릿 화 된 HTML에 가치를 전달하고자 할 때이다.

간단히하기 위해 여러 주소가있는 고객의 예를 사용합니다 (이 경우 고객은 개체이고 각 주소 인스턴스는 고객에게 연결된 다른 개체 임). 데이터의

예 : 여기

var customer = { 
    forename: "John", 
    surname: "Smith", 
    address1: { 
     street: "123 Street", 
     town: "Georgeville", 
    }, 
    address2: { 
     street: "67 Maple Grove", 
     town: "SomeTown" 
    } 
}; 

내 지시어 설정의 예입니다

var module = angular.module(...); 
module.directive("address", function() { 
    return { 
     restrict: 'A', 
     templateUrl: '/AddressView.html' 
    }; 
}); 

그리고 내 시도 사용 :

<div ng-model="customer"> 
    <div address></div> 
    <div address></div> 
</div> 

그리고 이것은 내가 무엇을 것입니다 템플릿 주소로 고객의 주소를 전달할 수 있기를 원합니다.

<div ng-model="customer"> 
    <div address ng-model="customer.address1"></div> 
    <div address ng-model="customer.address2"></div> 
</div> 

지시어의 목적을 잘못 이해했거나 가능하지 않을 수 있지만 제안 사항이 있으면 크게 감사하겠습니다.

추가 정보를 추가해야하는 경우 알려주십시오.

편집 여기

내가 달성하기 위해 노력하고 무엇을 설명하려고 설정 한하는 Plunker이다.

Answer 1

당신은 지시어의 범위를 고립 시켜서 혼란스럽지 않게해야합니다.

var customer = { 
    forename: "John", 
    surname: "Smith", 
    addresses: [ 
     address1: { 
      street: "123 Street", 
      town: "Georgeville", 
     }, 
     address2: { 
      street: "67 Maple Grove", 
      town: "SomeTown" 
     } 
    ] 
}; 

이 작업을 수행 할 수있는이 방법 : 그리고 당신의 목적은 더 나은 구조는 방법입니다

<div class="customer"> 
    <div address ng-repeat="address in customer.addresses"> 
     {{address.town}} {{address.street}} 
    </div> 
</div> 

you'r 여기 NG-모델을 사용하는 이유를 모르겠어요!
이것은 예이지만, plunker에 예제 코드가 있으면 쉽게 사용할 수 있습니다.

업데이트 : 당신의 NG 컨트롤러는 당신이 주소 개체에 액세스 할 수 있도록하므로 주소 지시어는 컨트롤러의 범위에있을 수 그것을 이동해야 잘못된 위치에

• 첫째.
• 두 번째로 정의되지 않은 변수는 거리와 마을입니다.
• 그리고 각 지시문이 다른 지시어의 변수를 엉망이 없도록 범위를 분리해야합니다.

다음은 작동하는 plunker입니다.
도움이 되길 바랍니다.