टेम्पलेट के साथ एनजी-शामिल नोड बदलें?

Question 1

कोंडा नया कोणीय। क्या इसमें शामिल टेम्पलेट की सामग्री के साथ एनजी-शामिल नोड को बदलना संभव है ? उदाहरण के लिए, साथ:

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

Question 2

मेरे पास यह एक ही मुद्दा था और फिर भी एक गतिशील टेम्पलेट को शामिल करने के लिए एनजी-की सुविधाओं को शामिल करना चाहता था। मैं एक गतिशील बूटस्ट्रैप टूलबार का निर्माण कर रहा था और मुझे सीएसएस शैलियों को ठीक से लागू करने के लिए क्लीनर मार्कअप की आवश्यकता थी।

यहाँ समाधान है कि मैं जो रुचि रखते हैं के लिए आया था:

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

यदि यह समाधान ऊपर के उदाहरण में उपयोग किया गया है, तो गुंजाइश'dy.htmlTemplatePath 'test.html पर सेट करने से वांछित मार्कअप हो जाएगा।

Question 3

तो @ user1737909 के लिए धन्यवाद, मैंने महसूस किया है कि एनजी-शामिल होने का रास्ता नहीं है। निर्देश बेहतर दृष्टिकोण और अधिक स्पष्ट हैं।

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

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

Html में:

<blah></blah>

Question 4

मुझे एक ही समस्या थी, मेरी तीसरी पार्टी css स्टाइलशीट अतिरिक्त DOM-element को पसंद नहीं करती थी।

मेरा समाधान सुपर-सरल था। बस एनजी शामिल 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>

मुझे यकीन है कि यह ज्यादातर स्थितियों में काम करेगा, यहां तक कि यह तकनीकी रूप से वह नहीं है जो सवाल पूछ रहा है।

Question 5

एक अन्य विकल्प यह है कि आप अपनी स्वयं की सरल जगह लिखें / निर्देश को शामिल करें

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

Question 6

यह बच्चों को बदलने का सही तरीका है

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

Question 7

निम्नलिखित निर्देश एनजी को शामिल करता है जिसमें मूल निर्देश कार्यक्षमता शामिल है।

यह मूल तत्व को बदलने के लिए एक ईवेंट श्रोता जोड़ता है जब सामग्री तैयार और लोड होती है।

इसे मूल तरीके से उपयोग करें, बस "बदलें" विशेषता जोड़ें:

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

या विशेषता संकेतन के साथ:

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

यहाँ निर्देश है (निर्भरता के रूप में 'शामिल-प्रतिस्थापित' मॉड्यूल को शामिल करना याद रखें):

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

Question 8

मैं @ ब्रैडी आइसोम द्वारा प्रदान किए गए एक से अधिक सुरक्षित समाधान के साथ जाऊंगा।

मैं यह सुनिश्चित करने के लिए 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());
            };
        }
    };
}])

दूसरे निर्देश की कोई आवश्यकता नहीं है क्योंकि सब कुछ पहले वाले के भीतर संभाला जाता है।