AngularJS: এনজি-অন্তর্ভুক্ত ভিতরে কৌনিক লোড স্ক্রিপ্ট কিভাবে করবেন?

Question 1

আরে আমি কৌনিক সহ একটি ওয়েব পৃষ্ঠা তৈরি করছি। সমস্যাটি হ'ল ইতিমধ্যে কৌণিক ব্যতীত কিছু কিছু তৈরি হয়েছে এবং আমাকে সেগুলিও অন্তর্ভুক্ত করতে হবে

সমস্যা হ'ল এটি।

আমার প্রধান এইচটিএমএলে আমার এরকম কিছু রয়েছে:

<ngInclude src="partial.html">
</ngInclude>

এবং আমার আংশিক এইচটিএমএলের কিছু আছে

<h2> heading 1 <h2>
<script type="text/javascript" src="static/js/partial.js">
</script>

এবং আমার আংশিক.জেএস এর অ্যাংুলারজগুলির সাথে কোনও সম্পর্ক নেই। nginclude কাজ করে এবং আমি এইচটিএমএল দেখতে পাচ্ছি, তবে জাভাস্ক্রিপ্ট ফাইলটি লোড হওয়া মোটেও দেখতে পাচ্ছি না। ফায়ারব্যাগ / ক্রোম-ডেভ-সরঞ্জামটি কীভাবে ব্যবহার করতে হয় তা আমি জানি তবে নেটওয়ার্ক অনুরোধটি করা হচ্ছে তা আমি দেখতেও পাই না। আমি কি ভুল করছি?

আমি কৌনিকটির স্ক্রিপ্ট ট্যাগটির কিছু বিশেষ অর্থ রেখেছি। আমি কি ওভাররাইড করতে পারি?

Question 2

গৃহীত উত্তর 1.2.0-rc1 + (গিথুব ইস্যু ) থেকে কাজ করবে না ।

এন্ডোরামা দ্বারা তৈরি একটি দ্রুত ফিক্স এখানে দেওয়া হয়েছে :

/*global angular */
(function (ng) {
  'use strict';

  var app = ng.module('ngLoadScript', []);

  app.directive('script', function() {
    return {
      restrict: 'E',
      scope: false,
      link: function(scope, elem, attr) {
        if (attr.type === 'text/javascript-lazy') {
          var code = elem.text();
          var f = new Function(code);
          f();
        }
      }
    };
  });

}(angular));

কেবল এই ফাইলটি যুক্ত করুন, ngLoadScriptঅ্যাপ্লিকেশন নির্ভরতা হিসাবে মডিউল লোড করুন এবং type="text/javascript-lazy"স্ক্রিপ্টের জন্য টাইপ হিসাবে ব্যবহার করুন যা আপনাকে পার্টিয়ালে অলসভাবে লোড করতে হবে:

<script type="text/javascript-lazy">
  console.log("It works!");
</script>

Question 3

সংক্ষিপ্ত উত্তর: AngularJS ("jqlite") এটি সমর্থন করে না। আপনার পৃষ্ঠায় jQuery অন্তর্ভুক্ত করুন (কৌণিক অন্তর্ভুক্ত করার আগে) এবং এটি কাজ করা উচিত। Https://groups.google.com/d/topic/angular/H4haaMePJU0/ddusussion দেখুন

Question 4

আমি নিমির পদ্ধতির চেষ্টা করেছি, কিন্তু এটি 1.2.0-rc.3 ব্যবহার করে আমার পক্ষে কাজ করে নি। স্ক্রিপ্ট ট্যাগটি ডিওমে sertedোকানো হত তবে জাভাস্ক্রিপ্টের পথটি লোড হবে না। আমার সন্দেহ হয় যে এটি যে জাভাস্ক্রিপ্টটি লোড করার চেষ্টা করছিলাম তা অন্য কোনও ডোমেন / প্রোটোকল থেকে। তাই আমি একটি ভিন্ন পদ্ধতির নেন, এবং এই কি আমি নিয়ে এসেছেন, Google- এর ব্যবহার করে একটি উদাহরণ হিসাবে মানচিত্র: ( সারকথা )

angular.module('testApp', []).
    directive('lazyLoad', ['$window', '$q', function ($window, $q) {
        function load_script() {
            var s = document.createElement('script'); // use global document since Angular's $document is weak
            s.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
            document.body.appendChild(s);
        }
        function lazyLoadApi(key) {
            var deferred = $q.defer();
            $window.initialize = function () {
                deferred.resolve();
            };
            // thanks to Emil Stenström: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
            if ($window.attachEvent) {  
                $window.attachEvent('onload', load_script); 
            } else {
                $window.addEventListener('load', load_script, false);
            }
            return deferred.promise;
        }
        return {
            restrict: 'E',
            link: function (scope, element, attrs) { // function content is optional
            // in this example, it shows how and when the promises are resolved
                if ($window.google && $window.google.maps) {
                    console.log('gmaps already loaded');
                } else {
                    lazyLoadApi().then(function () {
                        console.log('promise resolved');
                        if ($window.google && $window.google.maps) {
                            console.log('gmaps loaded');
                        } else {
                            console.log('gmaps not loaded');
                        }
                    }, function () {
                        console.log('promise rejected');
                    });
                }
            }
        };
    }]);

আমি আশা করি এটি কারও জন্য সহায়ক।

Question 5

স্ক্রিপ্ট ফাইলটি গতিশীলভাবে লোড করার জন্য আমি এই পদ্ধতিটি ব্যবহার করেছি (একটি নিয়ামকের অভ্যন্তরে)।

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);

Question 6

এটি 1.2.0-rc1 থেকে আর কাজ করবে না। এটি সম্পর্কে আরও জানার জন্য এই সমস্যাটি দেখুন , যাতে আমি একটি তাত্ক্ষণিকভাবে কর্মসংস্থান বর্ণনা করে একটি মন্তব্য পোস্ট করেছি। আমি এখানে এটি ভাগ করে নেব:

// Quick fix : replace the script tag you want to load by a <div load-script></div>.
// Then write a loadScript directive that creates your script tag and appends it to your div.
// Took me one minute.

// This means that in your view, instead of :
<script src="/path/to/my/file.js"></script>

// You'll have :
<div ng-load-script></div>

// And then write a directive like :
angular.module('myModule', []).directive('loadScript', [function() {
    return function(scope, element, attrs) {
        angular.element('<script src="/path/to/my/file.js"></script>').appendTo(element);
    }
}]);

সর্বকালের সেরা সমাধান নয়, তবে ওহে, না পরবর্তী ভিউগুলিতে স্ক্রিপ্ট ট্যাগগুলি রাখছেন না। আমার ক্ষেত্রে আমাকে এটি করতে হবে ফেসবুক / টুইটার / ইত্যাদি ব্যবহার করার আদেশ। উইজেট

Question 7

ocLazyLoad রাউটারগুলির মাধ্যমে টেমপ্লেট / ভিউগুলিতে অলসভাবে স্ক্রিপ্টগুলি লোড করতে দেয় (যেমন ইউআই-রাউটার)। এখানে একটি স্নিপলেট আছে

$stateProvider.state('parent', {
    url: "/",
    resolve: {
        loadMyService: ['$ocLazyLoad', function($ocLazyLoad) {
             return $ocLazyLoad.load('js/ServiceTest.js');
        }]
    }
})
.state('parent.child', {
    resolve: {
        test: ['loadMyService', '$ServiceTest', function(loadMyService, $ServiceTest) {
            // you can use your service
            $ServiceTest.doSomething();
        }]
    }
});

Question 8

একটি থেকে গতিগতভাবে পুনঃনির্ধারণ লোড করতে ui-viewআমি নিম্নলিখিত পদ্ধতিটি ব্যবহার করি:

ইন application.js:

    .directive('script', function($parse, $rootScope, $compile) {
    return {
        restrict: 'E',
        terminal: true,
        link: function(scope, element, attr) {
            if (attr.ngSrc) {
                 var domElem = '<script src="'+attr.ngSrc+'" async defer></script>';
                 $(element).append($compile(domElem)(scope));


            }
        }
    };
});

ইন myPartial.client.view.html:

 <script type="application/javascript" ng-src="http://www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded"></script>

Question 9

দুর্ভাগ্যক্রমে এই পোস্টে থাকা সমস্ত উত্তর আমার পক্ষে কার্যকর হয়নি। আমি নিম্নলিখিত ত্রুটি পেতে থাকি।

'ডকুমেন্ট' -তে 'রাইটিং' কার্যকর করতে ব্যর্থ: অসম্পূর্ণভাবে লোড হওয়া বাহ্যিক স্ক্রিপ্ট থেকে কোনও ডকুমেন্টে স্পষ্টভাবে খোলা না থাকলে লেখা সম্ভব নয়।

আমি জানতে পেরেছি যে আপনি যদি কিছু তৃতীয় পক্ষের উইজেট (আমার ক্ষেত্রে ডিমান্ডফোর্স) ব্যবহার করেন যা অতিরিক্ত বাহ্যিক জাভাস্ক্রিপ্ট ফাইলগুলিতে কল করে এবং এইচটিএমএল সন্নিবেশ করানোর চেষ্টা করে তবে এটি ঘটে। কনসোল এবং জাভাস্ক্রিপ্ট কোডটি দেখে আমি একাধিক লাইন লক্ষ্য করেছি:

document.write("<script type='text/javascript' "..."'></script>");

আমি তৃতীয় পক্ষের জাভাস্ক্রিপ্ট ফাইলগুলি ব্যবহার করেছি (htmlParser.js এবং পোষ্টস্ক্রিপ.জেএস): https://github.com/krux/postscribe থেকে । এটি এই পোস্টে সমস্যার সমাধান করেছে এবং একই সাথে উপরের ত্রুটিটি স্থির করেছে।

(আমার কাছে এখন টাইট সময়সীমার অধীনে এটি ছিল একটি দ্রুত এবং নোংরা উপায়। তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে আমি স্বাচ্ছন্দ্যবোধ করি না I আমি আশা করি যে কোনও ক্লিনার এবং আরও ভাল উপায় নিয়ে আসতে পারে))

Question 10

আমি গুগল রেক্যাপচা স্পষ্টভাবে ব্যবহার করার চেষ্টা করেছি। এখানে উদাহরণ:

// put somewhere in your index.html
<script type="text/javascript">
var onloadCallback = function() {
  grecaptcha.render('your-recaptcha-element', {
    'sitekey' : '6Ldcfv8SAAAAAB1DwJTM6T7qcJhVqhqtss_HzS3z'
  });
};

//link function of Angularjs directive
link: function (scope, element, attrs) {
  ...
  var domElem = '<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>';
  $('#your-recaptcha-element').append($compile(domElem)(scope));
}