AngularJS : 1개의 Angular 방향에서 여러 서브 요소를 변환합니다.

AngularJS : 1개의 Angular 방향에서 여러 서브 요소를 변환합니다.

나는 에 대해 읽고 있었다.ng-transclude앵귤러에서JS는 "다른 요소를 랩하는 지시문 작성"에 대해 문서화하고 있으며, 그 기능을 제대로 이해하고 있다고 생각합니다.

다음과 같은 내용이 포함된 요소에 적용되는 지시문이 있는 경우:

<my-directive>directive content</my-directive>

지시문 템플릿 내의 요소에 태그를 붙일 수 있습니다.ng-transclude요소에 포함된 내용이 태그 부착 요소 안에 렌더링됩니다.

따라서 템플릿이myDirective이

<div>before</div>
<div ng-transclude></div>
<div>after</div>

그렇게 되면 로 되어 버린다.

<div>before</div>
<div ng-transclude>directive content</div>
<div>after</div>

---

제 질문은 html의 단일 블록을 제 디렉티브에 전달하는 것이 가능한가 하는 것입니다.

예를 들어, 디렉티브의 사용법은 다음과 같습니다.

<my-multipart-directive>
     <part1>content1</part1>
     <part2>content2</part2>
</my-multipart-directive>

다음과 같은 템플릿이 있습니다.

<div>
  this: <div ng-transclude="part2"></div>
   was after that: <div ng-transclude="part1"></div>
   but now they are switched
<div>

다음과 같이 렌더링해 주셨으면 합니다.

<div>
  this: <div ng-transclude="part2">content2</div>
   was after that: <div ng-transclude="part1">content1</div>
   but now they are switched
<div>

노드의 HTML 값을 모델에 바인드하여 트랜스코드라고 부르지 않고 사용할 수 있도록 할 수 있을까요?

Angular 1.5부터는 여러 슬롯을 만들 수 있게 되었습니다.transclude: true 대신 각 슬롯의 매핑을 포함하는 객체를 제공합니다.

https://docs.angularjs.org/api/ng/directive/ngTransclude

angular.module('multiSlotTranscludeExample', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: {
        'title': '?pane-title',
        'body': 'pane-body',
        'footer': '?pane-footer'
      },
      template: '<div style="border: 1px solid black;">' +
                  '<div class="title" ng-transclude="title">Fallback Title</div>' +
                  '<div ng-transclude="body"></div>' +
                  '<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
                '</div>'
    };
})

좋은 질문입니다.빌트 인이 있는지는 잘 모르겠지만, 꽤 일반적인 방법으로 직접 할 수 있습니다.

다음과 같이 $transclude 서비스를 전달함으로써 트랜스코드된 요소에 액세스할 수 있습니다.

$transclude(function(clone, $scope) {

여기서 clone은 미리 연결된 변환된 컨텐츠의 복사본입니다.그런 다음 요소의 내용에 다음과 같이 레이블을 지정할 경우:

    <div id="content">
        <div id="content0">{{text}}</div>
        <div id="content1">{{title}}</div>
    </div>

내용을 루프하여 다음과 같이 컴파일할 수 있습니다.

$scope.transcludes.push($compile(clone[1].children[i])($scope));

좋습니다! 이제 내용을 템플릿의 올바른 위치에 저장하기만 하면 됩니다.

     '<div id="transclude0"></div>' +
     '<div id="transclude1"></div>' +

그러면 링크 함수에서 콘텐츠를 올바르게 할당할 수 있습니다.

angular.element(document.querySelector('#transclude' + i)).append(scope.transcludes[i]);

내가 바이올린을 설치해 놨어 이걸 가지고 연주할 수 있게 말이야

도움이 됐으면 좋겠네요!

프로젝트에서는 JSF 2의 ui:구성, ui:삽입, ui:정의(ui:구성 참조)를 따라 다중 사이트 추적 모델을 만들었습니다.

구현은 ui-template, ui-insert, ui-define의 3가지 간단한 지시로 구성됩니다(angularjs-api/template/ui-lib.js 참조).

템플릿을 정의하려면 다음 마크업을 작성합니다('angularjs-api/template/my-page.html' 참조).

<table ui-template>
  <tr>
    <td ui-insert="menu"></td>
  </tr>
  <tr>
    <td ui-insert="content"></td>
  </tr>
</table>

명령어를 선언합니다('angularjs-api/my-page.display' 참조).

  var myPage = 
  {
    templateUrl: "my-page.html",
    transclude: true
  };

  angular.module("app").
    directive("myPage", function() { return myPage; });

마지막으로 작성해야 할 디렉티브를 인스턴스화하려면 angularjs-api/sample.sample을 참조하십시오.

<my-page>
  <div ui-define="content">
    My content
  </div>
  <div ui-define="menu">
    <a href="#file">File</a>
    <a href="#edit">Edit</a>
    <a href="#view">View</a>
  </div>
</my-page>

작업 샘플은 rawgit: sample.html을 통해 확인할 수 있습니다.

다음 항목도 참조하십시오.각도에서의 다중 사이트 변환JS

언급URL : https://stackoverflow.com/questions/22079587/angularjs-transcluding-multiple-sub-elements-in-a-single-angular-directive