[angularjs] ng-include 노드를 템플릿으로 교체 하시겠습니까?

Program / 글쓴이

각도가 처음입니다. 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>

답변

나는 똑같은 문제가 있었고, 제 3 자 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 기본 지시문 기능을 확장합니다.

콘텐츠가 준비되고로드되면 원래 요소를 대체하는 이벤트 리스너를 추가합니다.

원래 방식으로 사용하고 “replace”속성 만 추가하면됩니다.

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

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