টেমপ্লেট সহ এনজি-অন্তর্ভুক্ত নোড প্রতিস্থাপন করবেন?

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>

উত্পন্ন এইচটিএমএল হ'ল:

<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

আমার এই একই সমস্যা ছিল এবং এখনও এনজি-অন্তর্ভুক্তের বৈশিষ্ট্যগুলি একটি গতিশীল টেম্পলেট অন্তর্ভুক্ত করতে চেয়েছিলাম। আমি একটি ডায়নামিক বুটস্ট্র্যাপ টুলবার তৈরি করছিলাম এবং সিএসএস শৈলীগুলি সঠিকভাবে প্রয়োগ করার জন্য আমার ক্লিনার মার্কআপ প্রয়োজন needed

যারা আগ্রহী তাদের জন্য আমি এখানে সমাধানটি নিয়ে এসেছি:

এইচটিএমএল:

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

যদি এই সমাধানটি উপরের উদাহরণে ব্যবহার করা হয়, স্কোপ.ডিনামিকটিম্পলেটপথকে 'test.html' এ সেট করার ফলে কাঙ্ক্ষিত মার্কআপের ফলস্বরূপ।

Question 3

সুতরাং @ ব্যবহারকারী 1737909 এর জন্য ধন্যবাদ, আমি বুঝতে পেরেছি যে এনজি-অন্তর্ভুক্ত করার উপায় নয়। দিকনির্দেশনাগুলি আরও ভাল পদ্ধতির এবং আরও সুস্পষ্ট।

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

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

এইচটিএমএলে:

<blah></blah>

Question 4

আমার একই সমস্যা ছিল, আমার তৃতীয় পক্ষের সিএসএস স্টাইলশিট অতিরিক্ত ডোম-উপাদান পছন্দ করে না।

আমার সমাধানটি অতি-সরল ছিল। শুধু এনজি-অন্তর্ভুক্ত 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());
            };
        }
    };
}])

প্রথম নির্দেশিকার মধ্যে সমস্ত কিছু পরিচালনা করা হওয়ায় দ্বিতীয় নির্দেশের দরকার নেই।