여러 템플릿이 포함된 AngularJS 지시문

여러 템플릿이 포함된 AngularJS 지시문

작업:

• 연락처를 보여주기 위해서.
• 연락처는 JSON 데이터입니다. {name: "Mark", 위치: "England", 전화: [...]}라고 합시다.
• 연락처는 다양한 방식으로 표시될 수 있습니다. 컴팩트/디테일/추가 정보로 향상됨(공유 연락처 - 추가 지시).

연락처가 다른 장소의 다른 페이지에 표시될 수 있기 때문에 연락처에 대한 지시문(위젯)을 만드는 것은 당연하지만, 여기서 질문이 있습니다: "여러 템플릿으로 동일한 위젯을 구성하는 방법은 무엇입니까?"

옵션:

1. ng-switch 및 ng-if가 많을 가능성이 있는 큰 템플릿인 연락처 "type"에 따라 섹션을 숨기는 하나의 템플릿으로 하나의 지시문을 작성합니다.
2. 각 템플릿에 대한 지시문 작성 - 다른 템플릿(또는 템플릿)만 있는 거의 동일한 지시문 작성URL)
3. 링크하는 동안 템플릿을 동적으로 로드하려면 - 트랜스클루전 및 교체(속성 병합) 문제가 있습니다.

이 문제를 해결한 경험은 어떻습니까?

개인적으로 저는 옵션 2가 디스플레이 모드 사이를 깔끔하게 분리할 수 있다고 생각합니다.각 템플릿에 대해 개별 지시어를 사용하여 이 작업을 깨끗하게 수행할 수 있는 방법을 설명하기 위해 작동하는 코드펜 예제를 만들었습니다.

제가 CodePen 예제에서 사용한 방법은 Angular DI를 통해 각 지시어에 주입되는 템플릿 팩토리를 활용합니다.템플릿 팩토리 구현은 지원되는 각 디스플레이 모드(콤팩트하고 상세)에 대해 ng 포함 템플릿 문자열만 사용하기 때문에 매우 깔끔합니다.실제 HTML 템플릿(부분)은 외부 보기 파일 또는 내부 스크립트 블록에 보관할 수 있습니다.

연락처 지침을 쉽게 사용할 수 있습니다.

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact>

이렇게 하면 연락처 목록의 압축 버전이 만들어집니다.

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact>

이렇게 하면 세부 연락처 목록이 만들어집니다.

제가 이러한 코드를 프로덕션에 배포하지 않았다는 것을 인정할 것이므로 확장성이나 기타 고려하지 않은 우려가 있을 수 있습니다.저는 제가 제공한 코드가 당신의 질문에 답하거나 최소한 추가적인 탐색을 위한 영감을 주기를 바랍니다.

Adam 예제를 사용하여 새로운 접근 방식을 개발했으며 각진 문서의 샘플을 사용하여 템플릿Url 속성 https://docs.angularjs.org/guide/directive, 의 함수에 대해 설명했습니다. 이 방법은 각진 문서의 플렁커입니다. http://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview

.directive('myCustomer', function() {
    return {
      templateUrl: function(elem, attr){
        return 'customer-'+attr.type+'.html';
      }
    };
  });

이것이 저의 리믹스된 해결책입니다.

http://codepen.io/anon/pen/wawOyz?editors=101

app.factory('templates', function() {
  return {
    compact:   'compact',
    detailed:  'detailed'
  };
 });

app.directive('contact', function(templates) {
  return {
    restrict: 'E',
    templateUrl: function($elem, $attr){
      return templates[$attr.mode];       
    },
    scope: {
      contact: '=ngModel'
    }
  };
});

모든 템플릿 주소를 하나의 공장에 배치하는 것이 마음에 들었지만, 모드별 지시가 상당히 반복적이라고 생각하기 때문에 이 접근 방식을 사용하는 여러 요소가 있다면 충돌하지 않도록 네임스페이스(연락처-텍스트, 이메일-텍스트, 회사-텍스트)를 구성해야 합니다.

이것이 더 나은 방법인지, 더 짧고 더 건조한 방법인지는 아직 잘 모르겠지만 테스트하기가 더 어렵거나 사용자 지정이 가능하지 않습니다.누구에게나 도움이 될 수 있는 접근법을 공유하고 싶었을 뿐입니다.

언급URL : https://stackoverflow.com/questions/19015239/angularjs-directive-with-multiple-templates