Ng-include düğümü şablonla değiştirilsin mi?

Açısaldan yeni bir tür. Ng-include düğümünü dahil edilen şablonun içeriği ile değiştirmek mümkün müdür ? Örneğin:

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

Oluşturulan 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>

Ama istediğim şey:

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

Aynı sorunu yaşadım ve yine de ng-include özelliklerinin dinamik bir şablon içermesini istedim. Dinamik bir Bootstrap araç çubuğu oluşturuyordum ve CSS stillerinin doğru şekilde uygulanması için daha temiz bir işaretlemeye ihtiyacım vardı.

İşte ilgilenenler için bulduğum çözüm:

HTML:

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

Özel Direktif:

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

Yukarıdaki örnekte bu çözüm kullanıldıysa, kapsam.dynamicTemplatePath'in 'test.html' olarak ayarlanması istenen işaretlemeyle sonuçlanacaktır.

@ User1737909'a teşekkürler, ng-include'in gidilecek yol olmadığını anladım. Direktifler daha iyi bir yaklaşımdır ve daha açıktır.

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

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

Html olarak:

<blah></blah>

Ben de aynı sorunu yaşadım, 3. taraf css stil sayfam fazladan DOM öğesini beğenmedi.

Benim çözümüm süper basitti. Ng-include 1'i yukarı hareket ettirin. Yani yerine

<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>

Ben basitçe yaptım:

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

Bahse girerim bu çoğu durumda işe yarayacaktır, soru teknik olarak sorulduğu şey olmasa da.

Diğer bir alternatif de kendi basit replace / include direktifinizi yazmaktır, ör.

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

Bu daha sonra aşağıdaki gibi kullanılacaktır:

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

Bu, çocukları değiştirmenin doğru yolu

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

Aşağıdaki yönerge, ng-include yerel yönergenin işlevselliğini genişletir.

İçerik hazır ve yüklendiğinde orijinal öğeyi değiştirmek için bir olay dinleyicisi ekler.

Bunu orijinal şekilde kullanın, sadece "değiştir" özelliğini ekleyin:

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

veya nitelik gösterimi ile:

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

Yönerge şu şekildedir (bağımlılık olarak 'dahil et-değiştir' modülünü eklemeyi unutmayın):

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 tarafından sağlanan çözümden daha güvenli bir çözümle giderdim.

Kaldırmaya çalışmadan önce şablonun yüklendiğinden emin olmak için onloadtarafından verilen seçeneğe güvenmeyi tercih ederim 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());
            };
        }
    };
}])

Her şey birincisinde ele alındığı için ikinci bir direktife gerek yok.