meaning - angularjs tutorial pdf




एनजी-शामिल नोड टेम्पलेट के साथ बदलें? (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>

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

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

जेनरेट किया गया एचटीएमएल है:

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

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

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

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

एचटीएमएल में:

<blah></blah>

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

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

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

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

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


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

मैं ng-include द्वारा दिए गए onload विकल्प पर भरोसा करना पसंद करता हूं यह सुनिश्चित करने के लिए कि टेम्पलेट को निकालने का प्रयास करने से पहले लोड किया गया हो।

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

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





angularjs