ng-include 노드를 템플릿으로 바꾸시겠습니까?

ng-include 노드를 템플릿으로 바꾸시겠습니까?

각이 지기엔 좀 생소하네요ng-include 노드를 포함된 템플릿의 내용으로 대체할 수 있습니까?예를 들어 다음과 같습니다.

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'"></div>
</div>

생성되는 html은 다음과 같습니다.

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'">
        <span class="ng-scope"> </span>
        <p>Test</p>
        <span class="ng-scope"> </span>
    </div>
</div>

하지만 내가 원하는 건

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <p>Test</p>
</div>

같은 문제가 있었는데도 ng-include의 기능에 다이내믹템플릿이 포함되기를 원했습니다.다이내믹 부트스트랩툴바를 만들고 있었는데, CSS스타일을 올바르게 적용하기 위해서는 클리너 마크업이 필요했습니다.

관심 있는 분들을 위해 제가 생각해낸 솔루션은 다음과 같습니다.

HTML:

<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());
        }
    };
});

위의 예에서 이 솔루션을 사용한 경우 scope.dynamicTemplatePath를 'test.html'로 설정하면 원하는 마크업이 생성됩니다.

그래서 @user1737909 덕분에 ng-include는 좋은 방법이 아니라는 것을 알게 되었습니다.지시문은 더 나은 접근법이고 더 명확합니다.

var App = angular.module('app', []);

App.directive('blah', function() {
    return {
        replace: true,
        restrict: 'E',  
        templateUrl: "test.html"
    };
});

html:

<blah></blah>

저도 같은 문제가 있었습니다.서드파티 css 스타일시트가 추가 DOM 요소를 좋아하지 않았습니다.

내 해결책은 매우 간단했다.ng-include 1을 위로 이동합니다.그래서 대신

<md-sidenav flex class="md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')">
  <div ng-include="myService.template"></span>
</md-sidenav>

저는 그냥 했어요:

<md-sidenav flex class="md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')" ng-include="myService.template">
</md-sidenav>

대부분의 상황에서 효과가 있을 것입니다.설령 기술적으로 질문의 대상이 아니더라도요.

또 다른 대안은 다음과 같은 간단한 대체/포함 지시문을 작성하는 것입니다.

    .directive('myReplace', function () {
               return {
                   replace: true,
                   restrict: 'A',
                   templateUrl: function (iElement, iAttrs) {
                       if (!iAttrs.myReplace) throw new Error("my-replace: template url must be provided");
                       return iAttrs.myReplace;
                   }
               };
           });

이것은 다음과 같이 사용됩니다.

<div my-replace="test.html"></div>

이것이 아이들을 교체하는 올바른 방법입니다.

angular.module('common').directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: 'A',
        compile: function (tElement, tAttrs) {
            tElement.replaceWith(tElement.children());
            return {
                post : angular.noop
            };
        }
    };
});

다음 디렉티브는 ng-include 네이티브 디렉티브 기능을 확장합니다.

컨텐츠가 준비되고 로드되면 원래 요소를 대체할 이벤트청취자를 추가합니다.

원래 방식으로 사용하면 "바꾸기" 속성을 추가할 수 있습니다.

<ng-include src="'src.html'" replace></ng-include>

또는 속성 표기법:

<div ng-include="'src.html'" replace></div>

다음은 지침입니다(의존관계로 'include-replace' 모듈을 포함해야 함).

angular.module('include-replace', []).directive('ngInclude', function () {
    return {
        priority: 1000,
        link: function($scope, $element, $attrs){

            if($attrs.replace !== undefined){
                var src = $scope.$eval($attrs.ngInclude || $attrs.src);

                var unbind = $scope.$on('$includeContentLoaded', function($event, loaded_src){
                    if(src === loaded_src){
                        $element.next().replaceWith($element.next().children());
                        unbind();
                    };
                });
            }
        }
    };
});

저는 @Brady Isom이 제공한 솔루션보다 안전한 솔루션을 선택하겠습니다.

저는 다음 항목에 의존하는 것을 선호합니다.onload에 의해 주어지는 선택권ng-include템플릿을 삭제하기 전에 로드되었는지 확인합니다.

.directive('foo', [function () {
    return {
        restrict: 'E', //Or whatever you need
        scope: true,
        template: '<ng-include src="someTemplate.html" onload="replace()"></ng-include>',
        link: function (scope, elem) {
            scope.replace = function () {
                elem.replaceWith(elem.children());
            };
        }
    };
}])

모든 것이 첫 번째 지시문 내에서 처리되므로 두 번째 지시문은 필요하지 않습니다.

언급URL : https://stackoverflow.com/questions/16496647/replace-ng-include-node-with-template