AngularJS - 다른 파셜 내에서 파셜을 동적으로 사용

AngularJS - 다른 파셜 내에서 파셜을 동적으로 사용

저는 Angular에 비교적 처음 와 봅니다.JS와 부분 템플릿을 동적으로 풀인하는 것이 얼마나 실현 가능한지 알고 싶습니다.이 예에서는 추상화된(및 단순화된) 모듈을 고려합니다.이 자체가 애플리케이션 전체에서 재사용될 부분 템플릿이 됩니다.

부분 모듈 마크업

<div class="module">
    <h2 class="module-title">{{module.title}}</h2>

    <div class="module-content">
        {{module.content}}
    </div>

</div>

을 좀 에, 에, 를 도 있습니다.module.content단순한 문자열의 텍스트가 됩니다. 문제가 없습니다.할 수 합니다.module.content제가 작업하고 있는 데이터를 바탕으로 말입니다.예를 들어 제 답변에 표시할 헤드라인 목록이 있다고 하면 헤드라인을 처리하는 부분 템플릿을 가져올 수 있습니까? 또 에서는module.content이미지 갤러리를 처리하는 부분 템플릿일 수 있습니다.

어떤 입력이나 지시도 대단히 감사하겠습니다!

몇 가지 접근 방법이 있습니다.

당신의 최선의 선택은 당신 자신의 지시사항을 추가하는 것입니다.예를 들어 확장하기:

module.directive('myModule', function() {
  return {
    restrict: 'A',
    scope : {
      title : '@'
    },
    templateUrl : '/partial/module.html',
    transclude : true
  };
});

내용의 유연성을 높이기 위해 트랜스클루전을 사용할 것입니다.이제 부분:

<div class="module">
  <h2 class="module-title">{{title}}</h2>

  <div class="module-content" ng-transclude></div>
</div>

이 지시어를 설치하면 다음 HTML을 사용할 수 있습니다.

<div my-module title="{{module.title}}">
  {{module.content}}
</div>

또 다른 방법은 지시문을 사용하는 것입니다.이것은 어떤 부분을 단순하게 포괄하는 것인데, 그 차이는 배제된 부분이 그것이 포함된 맥락과 같은 범위에 살고 있다는 것입니다.

<div ng-include="module.partialUrl"></div>

Angular 는 URL 에서합니다.$scope.module.partialUrl할 수 (편집: ngInclude에서 사용하는 스코프 변수를 대체하여 UI를 동적으로 대체할 수 있습니다.대박이죠?)

반복 코드를 피하기 위해 동일한 부분만 재사용하는 경우 URL을 작은 따옴표로 둘러싸기만 하면 됩니다.

<div ng-include="'/partial/foo.html'"></div>

언급URL : https://stackoverflow.com/questions/12736283/angularjs-using-partials-dynamically-within-other-partials