আমার কৌনিক নিয়ামকের মধ্যে আমার একটি ফাংশন রয়েছে, আমি চাই যে এই ফাংশনটি নথি প্রস্তুতের জন্য চালানো হোক তবে আমি লক্ষ্য করেছি যে ডোম তৈরি হওয়ার সাথে সাথে কৌণিক এটি চালায়।
function myController($scope)
{
$scope.init = function()
{
// I'd like to run this on document ready
}
$scope.init(); // doesn't work, loads my init before the page has completely loaded
}
কেউ কি জানেন যে আমি এটি সম্পর্কে কীভাবে যেতে পারি?
উত্তর:
angular.element(document).ready()ডকুমেন্টটি প্রস্তুত হওয়ার জন্য আমরা কলব্যাকগুলি সংযুক্ত করার জন্য পদ্ধতিটি ব্যবহার করতে পারি । আমরা সহজেই কন্ট্রোলারে কলব্যাক সংযুক্ত করতে পারি:
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
document.getElementById('msg').innerHTML = 'Hello';
});
}]);$documentএটি ব্যবহারের জন্য আপনাকে ইনজেক্ট করতে হবে। angular.elementবাক্সের বাইরে কাজ করে.
documentএকটি বিশ্বব্যাপী পরিবর্তনশীল যেখানে $documentকৌণিক দ্বারা ইনজেক্টেবল এবং এইভাবে পরীক্ষা সহজতর করে তোলে। সাধারণভাবে টেস্ট অ্যাপ্লিকেশনগুলির একক করা শক্ত যা দস্তাবেজ বা উইন্ডোর মতো গ্লোবাল জেএস ভেরিয়েবলগুলিতে অ্যাক্সেস করে। আমিও মনে করি module.runএটি নিয়ামকের পরিবর্তে এই কোডটি রাখার জন্য ভাল জায়গা।
এই পোস্টটি দেখুন পৃষ্ঠা লোডে কৌনিক নিয়ামক ফাংশন কার্যকর করতে কীভাবে?
দ্রুত দেখার জন্য:
// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>
// in controller
$scope.init = function () {
// check if there is query in url
// and fire search in case its value is not empty
};এইভাবে, নথি প্রস্তুত হওয়া পর্যন্ত আপনাকে অপেক্ষা করতে হবে না।
DOMContentLoadedকৌনিকটি স্বয়ংক্রিয়ভাবে ইভেন্টের পরে শুরু হয় বা যখন কৌণিক.জেএস স্ক্রিপ্টটি মূল্যায়ন করা হয় যদি সেই সময় নথি থাকে।ডিয়ার স্টেটটি 'সম্পূর্ণ' এ সেট করা থাকে। এই মুহুর্তে অ্যাঙ্গুলার এনজি-অ্যাপ্লিকেশন নির্দেশিকা সন্ধান করে যা আপনার অ্যাপ্লিকেশন রুটকে মনোনীত করে।
https://docs.angularjs.org/guide/bootstrap
এর অর্থ হ'ল ডিওএম প্রস্তুত হওয়ার পরে নিয়ামক কোডটি চলবে।
সুতরাং এটি ঠিক $scope.init()।
DOMContentLoadedযখন ডকুমেন্ট সম্পূর্ণরূপে লোড করা হয়েছে এবং পার্স, স্টাইলশীট, ছবি, এবং ফিনিস লোডিং subframes জন্য অপেক্ষা না করেই বহিস্কার করা হয়। আরও তথ্যের জন্য, দেখুন ডমকন্টেন্টলয়েড এবং লোড ইভেন্টের মধ্যে পার্থক্য কী? ।
কৌণিক কার্য সম্পাদন শুরু করার জন্য বেশ কয়েকটি টাইমপয়েন্ট রয়েছে। আপনি যদি jQuery এর মতো কিছু সন্ধান করেন
$(document).ready();আপনি এই এনালগটি কৌণিকের মধ্যে খুব দরকারী হতে পারেন:
$scope.$watch('$viewContentLoaded', function(){
//do something
});আপনি যখন ডিওএম উপাদানগুলি পরিচালনা করতে চান তখন এইটি সহায়ক। সমস্ত তেজ উপাদান লোড হওয়ার পরে এটি কার্যকর করা শুরু করবে।
ইউপিডি: আপনি যখন সিএসএসের বৈশিষ্ট্য পরিবর্তন করতে চান তখন উপরে যা বলা হয় তা কাজ করে। যাইহোক, কখনও কখনও যখন আপনি উপাদান বৈশিষ্ট্য যেমন প্রস্থ, উচ্চতা ইত্যাদি পরিমাপ করতে চান তখন এটি কাজ করে না আপনি এই ক্ষেত্রে চেষ্টা করতে পারেন:
$scope.$watch('$viewContentLoaded',
function() {
$timeout(function() {
//do something
},0);
});আমার একইরকম পরিস্থিতি ছিল যেখানে ভিউ লোড হওয়ার পরে এবং ভিউয়ের মধ্যে একটি বিশেষ তৃতীয় পক্ষের উপাদান লোড করা, শুরু করার পরে, এবং নিজেকে to সুযোগের ভিত্তিতে একটি রেফারেন্স দেওয়ার পরেও আমাকে একটি নিয়ামক ফাংশন সম্পাদন করতে হবে। আমার পক্ষে যে কাজটি শেষ হয়েছিল তা হ'ল এই স্কোপ প্রোপার্টিটিতে একটি ওয়াচ সেটআপ করা এবং আমার ক্রিয়াকলাপটি শুরু করার পরেই ফায়ার করা।
// $scope.myGrid property will be created by the grid itself
// The grid will have a loadedRows property once initialized
$scope.$watch('myGrid', function(newValue, oldValue) {
if (newValue && newValue.loadedRows && !oldValue) {
initializeAllTheGridThings();
}
});অপরিশোধিত মান সহ প্রহরীকে কয়েকবার বলা হয়। তারপরে যখন গ্রিডটি তৈরি হয় এবং প্রত্যাশিত সম্পত্তি থাকে, তখন আরম্ভের ফাংশনটি নিরাপদে কল করা যেতে পারে। প্রথমবার দর্শকদের অ-সংজ্ঞায়িত নতুন ভ্যালু দিয়ে ডেকে পাঠানো হলে ওল্ডভ্যালু এখনও অপরিজ্ঞাত থাকবে।
কফিসক্রিপ্টটি ব্যবহার করে কোনও বহিরাগত নিয়ামকটির ভিতরে আমার এই প্রচেষ্টা। এটি বরং ভাল কাজ করে। দয়া করে মনে রাখবেন সেটিংস.স্ক্রিন.এক্সএস | এসএম | এমডি | এলজি অ্যাপ্লিকেশনটির সাথে আমি অন্তর্ভুক্ত থাকা অ-অ-অ-ফাইলিত সংজ্ঞায়িত স্ট্যাটিক মান। মূল্যবৃত্তিগুলি মিডিয়া ক্যোয়ারী মাপের মাপের জন্য বুটস্ট্র্যাপ 3 অফিশিয়াল ব্রেকপয়েন্টগুলি অনুসারে:
xs = settings.screen.xs // 480
sm = settings.screen.sm // 768
md = settings.screen.md // 992
lg = settings.screen.lg // 1200
doMediaQuery = () ->
w = angular.element($window).width()
$scope.xs = w < sm
$scope.sm = w >= sm and w < md
$scope.md = w >= md and w < lg
$scope.lg = w >= lg
$scope.media = if $scope.xs
"xs"
else if $scope.sm
"sm"
else if $scope.md
"md"
else
"lg"
$document.ready () -> doMediaQuery()
angular.element($window).bind 'resize', () -> doMediaQuery()উত্তর
$scope.$watch('$viewContentLoaded',
function() {
$timeout(function() {
//do something
},0);
});আমি পরীক্ষিত বেশিরভাগ পরিস্থিতিতেই একমাত্র কাজ করে। একটি টেমপ্লেট থেকে এইচটিএমএল তৈরি করা 4 টি উপাদান সহ একটি নমুনা পৃষ্ঠায়, ইভেন্টগুলির ক্রম ছিল
$document ready
$onInit
$postLink
(and these 3 were repeated 3 more times in the same order for the other 3 components)
$viewContentLoaded (repeated 3 more times)
$timeout execution (repeated 3 more times)সুতরাং একটি ডকুমেন্ট.ডিয়ার () বেশিরভাগ ক্ষেত্রেই অকেজো, যেহেতু কৌণিকভাবে ডোম নির্মিত হচ্ছে কোথাও প্রস্তুত কাছাকাছি থাকতে পারে না।
তবে আরও মজার বিষয়, এমনকি $ ভিউকন্টেন্টলয়েড বহিস্কারের পরেও আগ্রহের উপাদানটি এখনও খুঁজে পাওয়া যায়নি।
$ সময়সীমা নির্বাহের পরে কেবল এটিই পাওয়া গেল। মনে রাখবেন যে $ টাইমআউটটি 0 এর মান হলেও এটি কার্যকর হওয়ার আগে প্রায় 200 মিলিসেকেন্ড বিস্তৃত হয়েছিল, এটি সূচিত করে যে এই থ্রেডটি বেশ কিছু সময়ের জন্য বন্ধ ছিল, সম্ভবত DOM এর একটি মূল থ্রেডে কৌনিক টেম্পলেট যুক্ত ছিল। প্রথম $ ডকুমেন্ট.ডিআর () থেকে শেষ $ সময়সীমা নির্বাহের মোট সময় ছিল প্রায় 500 মিলিসেকেন্ড।
একটি অসাধারণ ক্ষেত্রে যেখানে কোনও উপাদানটির মান নির্ধারণ করা হয়েছিল এবং তারপরে পাঠ্য () মানটি পরে $ সময়সাপেক্ষে পরিবর্তন করা হয়েছিল, সময় না হওয়া পর্যন্ত worked টাইমআউট মানটি বাড়ানো হয়েছিল (যদিও উপাদানটি সময়সীমার সময় খুঁজে পাওয়া যেত )। তৃতীয় পক্ষের উপাদানটির মধ্যে কিছুটা অ্যাসিঙ্কের কারণে পর্যাপ্ত সময় না পারা অবধি পাঠ্যের উপরে একটি মানকে প্রাধান্য দেওয়া হয়েছিল। আরেকটি সম্ভাবনা হ'ল $ সুযোগ $ evalAsync, কিন্তু চেষ্টা করা হয়নি।
আমি এখনও সেই একটি ইভেন্টের সন্ধান করছি যা আমাকে জানিয়েছে যে ডম সম্পূর্ণরূপে স্থির হয়ে গেছে এবং যাতে পরিচালনা করা যায় যাতে সমস্ত ক্ষেত্রে কাজ হয়। এখনও পর্যন্ত একটি স্বেচ্ছাসেবী সময়সীমার মান প্রয়োজনীয়, সর্বোপরি এটি একটি ক্লডেজ যা ধীর ব্রাউজারে কাজ না করে। আমি লাইভকুয়ারির মতো জিকুয়ের বিকল্পগুলি চেষ্টা করেছি এবং প্রকাশ করতে / সাবস্ক্রাইব করে যা কাজ করতে পারে, তবে অবশ্যই খাঁটি কৌণিক নয়।
যদি আপনি এর মতো কিছু পেয়ে থাকেন তবে getElementById call returns nullএটি সম্ভবত কারণ ফাংশনটি চালু রয়েছে, তবে আইডির DOM এ লোড করার সময় হয়নি।
বিলম্বের সাথে উইলের উত্তরটি (শীর্ষের দিকে) ব্যবহার করার চেষ্টা করুন। উদাহরণ:
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
$scope.sleep = (time) => {
return new Promise((resolve) => setTimeout(resolve, time));
};
angular.element(document).ready(function () {
$scope.sleep(500).then(() => {
//code to run here after the delay
});
});
}]);কৌনিক দস্তাবেজগুলি https://docs.angularjs.org/api/ng/function/angular.element উল্লেখ করেছে সেগুলি দিয়ে কেন চেষ্টা করবেন না ।
angular.element (কলব্যাক)
আমি এটি আমার $ onInit () {...} ফাংশনটিতে ব্যবহার করেছি।
var self = this;
angular.element(function () {
var target = document.getElementsByClassName('unitSortingModule');
target[0].addEventListener("touchstart", self.touchHandler, false);
...
});এটি আমার পক্ষে কাজ করেছে।
$scope.$on('$ViewData', function(event) {
//Your code.
});