ng include를 사용할 경우 추가 DOM 노드 사용을 방지합니다.

ng include를 사용할 경우 추가 DOM 노드 사용을 방지합니다.

저는 일반 HTML 데모에서 각진 앱을 만들고 있기 때문에 추가 DOM 요소를 사용하지 않는 엔지 인크루드(ng-include) 방법에 대해 마음을 싸매는 데 어려움을 겪고 있습니다.저는 완전히 개발되고 단단히 DOM 결합된 CSS(SASS에서 구축된)로 꽤 슬림한 HTML로 작업하고 있으며 리팩토링은 무슨 수를 써서라도 피하고 싶은 것입니다.

실제 코드는 다음과 같습니다.

<div id="wrapper">
    <header
        ng-controller="HeaderController"
        data-ng-class="headerType"
        data-ng-include="'/templates/base/header.html'">
    </header>
    <section
        ng-controller="SubheaderController"
        data-ng-class="subheaderClass"
        ng-repeat="subheader in subheaders"
        data-ng-include="'/templates/base/subheader.html'">
    </section>
    <div
        class="main"
        data-ng-class="mainClass"
        data-ng-view>
    </div>
</div>

저는 <섹션>이 반복적인 요소이지만 나름의 논리와 다른 내용을 가지고 있어야 합니다.내용과 반복 횟수 모두 비즈니스 논리에 따라 달라집니다.보다시피 ng-controller와 ng-repeat를 <섹션> 요소에 넣어도 작동하지 않습니다.하지만 제가 피하고자 하는 것은 새로운 DOM 노드를 삽입하는 것입니다.

내가 뭘 놓치고 있는 거지?이것이 최선의 방법입니까 아니면 더 나은 방법이 있습니까?

---

EDIT: 의견에서 요청한 대로 명확히 설명하자면, 제가 생성하려는 최종 HTML은 다음과 같습니다.

<div id="wrapper">
    <header>...</header>
    <section class="submenuX">
        some content from controller A and template B (e.g. <ul>...</ul>)
    </section>
    <section class="submenuY">
        different content from same controller A and template B (e.g. <div>...</div>)
    </section>
    <section class="submenuZ">
        ... (number of repetitions is defined in controller A e.g. through some service)
    </section>

    <div>...</div>
</div>

동일한 템플릿 B(subheader.html)를 사용하고 싶은 이유는 코드 청결을 위해서 입니다.subheader.html은 동적 컨텐츠를 반환하기 위해 일종의 ng-switch를 갖는 것으로 생각합니다.

하지만 기본적으로, 아래의 질문은 DOM 노드를 사용하지 않고 템플릿의 내용을 투명하게 포함할 수 있는 방법이 있을까 하는 것입니다.

---

EDIT2: 솔루션을 재사용해야 합니다.=)

다른 대답들 중 일부는 다음과 같이 말합니다.replace:true, 하지만 명심하세요.replace:true템플릿에 감가상각으로 표시됩니다.

대신, 비슷한 질문에 대한 대답에서 우리는 다음과 같은 대안을 찾습니다.다음과 같이 쓸 수 있습니다.

<div ng-include src="dynamicTemplatePath" include-replace></div>

사용자 지정 지침:

app.directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: 'A', /* optional */
        link: function (scope, el, attrs) {
            el.replaceWith(el.children());
        }
    };
});

(다른 대답에서 paste을 자릅니다)

편집: 약간의 연구를 거쳐 완성도를 위해 몇 가지 정보를 추가했습니다.1.1.4 이후로는 다음과 같이 작동합니다.

app.directive('include',
    function () {
        return {
            replace: true,
            restrict: 'A',
            templateUrl: function (element, attr) {
                return attr.pfInclude;
            }
        };
    }
);

용도:

<div include="'path/to/my/template.html'"></div>

그러나 한 가지 얻을 수 있는 것이 있습니다. 템플릿은 동적일 수 없습니다(예: $scope 또는 해당 사항에 대한 DI가 템플릿 Url에서 액세스할 수 없으므로 범위를 통해 변수를 전달하는 것). 문자열만 전달할 수 있습니다(위의 html 스니펫과 마찬가지로).특정 문제를 우회하려면 이 코드 조각이 다음과 같은 요령을 수행해야 합니다(이 플러그인에 대한 kudos).

app.directive("include", function ($http, $templateCache, $compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            var templateUrl = scope.$eval(attributes.include);
            $http.get(templateUrl, {cache: $templateCache}).success(
                function (tplContent) {
                    element.replaceWith($compile(tplContent.data)(scope));
                }
            );
        }
    };
});

용도:

<div include="myTplVariable"></div>

사용자 지정 지시문을 작성할 수 있습니다. 템플릿에 연결할 때templateUrl성,replace.true:

app.directive('myDirective', function() {
  return {
    templateUrl: 'url/to/template',
    replace: true,
    link: function(scope, elem, attrs) {

    }
  }
});

이는 래퍼 요소가 없고 래퍼 범위가 없는 템플릿 그대로를 포함합니다.

이 질문을 방문한 사람은 다음과 같습니다.

각 1.1.4+ 기준 템플릿에서 함수를 사용할 수 있습니다.동적으로 만들기 위한 URL.

여기 다른 답변을 확인해 보세요.

올바른 설정을 통해 자신의 고유한 기능을 정의할 수 있습니다.ngIncludeAngular.js에서 제공하는 명령 대신 실행할 수 있고 실행할 내장 명령을 방지할 수 있습니다.

기본 제공 순위를 기본 명령의 순위보다 Angular-built-in 합니다의 :ngInclude그리고 설정합니다.terminal산의 true.

그런 다음 템플릿을 가져와 요소의 DOM 노드를 컴파일된 템플릿 HTML로 대체하는 포스트링크 기능을 제공해야 합니다.

경고의 한 마디: 이것은 다소 엄격한 것이고, 당신은 다음과 같은 행동을 재정의합니다.ngInclude당신의 모든 지원을 위하여.그러므로 나는 아래의 지시사항을 on이 아닌 것으로 설정합니다.myApp범위를 제한하라는 내 지시사항 중 하나입니다응용 프로그램 전체에서 사용하려면 해당 동작을 구성할 수 있도록 설정할 수 있습니다. 예를 들어 요소를 교체하는 경우에만 해당 요소를 교체합니다.replace.attribute는 HTML당 innerHtml됩니다 .

또한: 이것은 애니메이션과 잘 어울리지 않을 수도 있습니다.의 코드ngInclude- 길기을 사용할 를 c - 한다면, 를, c&p 를합니다.`$element.replaceWith()그 안으로.

var includeDirective = ['$http', '$templateCache', '$sce', '$compile',
                        function($http, $templateCache, $sce, $compile) {
    return {
        restrict: 'ECA',
        priority: 600,
        terminal: true,
        link: function(scope, $element, $attr) {
            scope.$watch($sce.parseAsResourceUrl($attr.src), function ngIncludeWatchAction(src) {    
                if (src) {
                    $http.get(src, {cache: $templateCache}).success(function(response) {
                        var e =$compile(response)(scope);
                        $element.replaceWith(e);
                    });       
                }
            }); 
        }
    };
}];

myApp.directive('ngInclude', includeDirective);

언급URL : https://stackoverflow.com/questions/17589358/avoid-using-extra-dom-nodes-when-using-nginclude