আমি টেবিলের সাথে ডিভকে লক্ষ্য করে কিছু jQuery ফাংশন কল করতে চাই। সেই টেবিলটি জনবহুল ng-repeat।
আমি যখন এটি কল
$(document).ready()আমার কোন ফল নেই।
এছাড়াও
$scope.$on('$viewContentLoaded', myFunc);সাহায্য করে না
এনজি-রিপিট জনসংখ্যা সম্পূর্ণ হওয়ার পরে ঠিক কি কার্য সম্পাদনের কোনও উপায় আছে? আমি কাস্টম ব্যবহার সম্পর্কে একটি পরামর্শ পড়েছি directive, তবে এনজি-রিপিট এবং আমার ডিভ দিয়ে কীভাবে এটি ব্যবহার করব তা আমার কোনও ধারণা নেই ...
উত্তর:
প্রকৃতপক্ষে, আপনাকে নির্দেশাবলী ব্যবহার করা উচিত এবং এনজি-রিপিট লুপের শেষে কোনও ইভেন্ট বাঁধা নেই (প্রতিটি উপাদান স্বতন্ত্রভাবে নির্মিত হয়, এবং এটির নিজস্ব ইভেন্ট রয়েছে)। তবে ক) নির্দেশিকা ব্যবহারের প্রয়োজন হতে পারে আপনার প্রয়োজন এবং খ) কয়েকটি এনজি-পুনরাবৃত্তি নির্দিষ্ট বৈশিষ্ট্য রয়েছে যা আপনি আপনার "এনজিপিপিট সমাপ্ত" ইভেন্টটি তৈরি করতে ব্যবহার করতে পারেন।
বিশেষত, আপনার সমস্ত কিছু যদি টেবিলের পুরো অংশে ইভেন্টগুলি স্টাইল করা / যুক্ত করা হয় তবে আপনি এমন নির্দেশের সাহায্যে এটি করতে পারেন যা সমস্ত এনজিপিপিট উপাদানগুলিকে অন্তর্ভুক্ত করে। অন্যদিকে, আপনি যদি প্রতিটি উপাদানকে বিশেষভাবে সম্বোধন করতে চান, আপনি এনজিপিটাইটের মধ্যে একটি নির্দেশিকা ব্যবহার করতে পারেন এবং এটি তৈরি হওয়ার পরে এটি প্রতিটি উপাদানটিতে কাজ করবে।
তারপর, আছে $index, $first, $middleএবং $lastবৈশিষ্ট্য আপনি ট্রিগার ঘটনা ব্যবহার করতে পারেন। সুতরাং এই এইচটিএমএল জন্য:
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
আপনি এর মতো নির্দেশাবলী ব্যবহার করতে পারেন:
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$last){
window.alert("im the last!");
}
};
})
.directive('myMainDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('border','5px solid red');
};
});
এটি এই প্লাঙ্কারের ক্রিয়াতে দেখুন । আশা করি এটা সাহায্য করবে!
যদি আপনি কেবল লুপের শেষে কিছু কোড সম্পাদন করতে চান তবে এখানে কিছুটা সহজ প্রকরণ যা অতিরিক্ত ইভেন্ট হ্যান্ডলিংয়ের প্রয়োজন হয় না:
<div ng-controller="Ctrl">
<div class="thing" ng-repeat="thing in things" my-post-repeat-directive>
thing {{thing}}
</div>
</div>
function Ctrl($scope) {
$scope.things = [
'A', 'B', 'C'
];
}
angular.module('myApp', [])
.directive('myPostRepeatDirective', function() {
return function(scope, element, attrs) {
if (scope.$last){
// iteration is complete, do whatever post-processing
// is necessary
element.parent().css('border', '1px solid black');
}
};
});
বিশেষ করে কেবলমাত্র একটি ng-repeatসম্পূর্ণ ইভেন্ট তৈরি করার জন্য কোনও নির্দেশিকা তৈরি করার দরকার নেই ।
ng-init আপনার জন্য যাদু না।
<div ng-repeat="thing in things" ng-init="$last && finished()">এটি $lastনিশ্চিত করে, এটি finishedকেবল বরখাস্ত হয়, যখন শেষ উপাদানটি ডিওমে দেওয়া হয়।
$scope.finishedইভেন্ট তৈরি করতে ভুলবেন না ।
শুভ কোডিং !!
সম্পাদনা: 23 অক্টোবর 2016
যদি আপনার কাছে কল করতে চান finishedযখন অ্যারের মধ্যে কোন আইটেম তারপর আপনি নিম্নলিখিত ব্যবহার করতে পারেন ফাংশন কার্যসংক্রান্ত
<div style="display:none" ng-init="things.length < 1 && finished()"></div>
//or
<div ng-if="things.length > 0" ng-init="finished()"></div>ng-repeatউপাদানটির শীর্ষে কেবল উপরের লাইনটি যুক্ত করুন । এটি অ্যারের কোনও মান রাখছে না কিনা তা পরীক্ষা করে এটি অনুসারে ফাংশনটি কল করবে।
যেমন
<div ng-if="things.length > 0" ng-init="finished()"></div>
<div ng-repeat="thing in things" ng-init="$last && finished()">এখানে একটি পুনরাবৃত্তি সম্পন্ন নির্দেশনা যা সত্য যখন নির্দিষ্ট ফাংশনকে ডাকে। আমি খুঁজে পেয়েছি যে ডুম ডেরামের দ্বারা রেন্ডার করা উপাদানগুলিতে সরঞ্জামদণ্ডকে আরম্ভ করার মতো ডাকা ফাংশনটি অবশ্যই বিরতি = 0 সহ টাইমআউট ব্যবহার করে। জেএসফিডাল: http://jsfiddle.net/tQw6w/
$ স্কোপ.লেআউটআউট সম্পন্ন করে, $ টাইমআউট লাইনটি মন্তব্য করার চেষ্টা করুন এবং "সঠিক নয়!" টুলটিপসের পার্থক্যটি দেখতে লাইন।
<ul>
<li ng-repeat="feed in feedList" repeat-done="layoutDone()" ng-cloak>
<a href="{{feed}}" title="view at {{feed | hostName}}" data-toggle="tooltip">{{feed | strip_http}}</a>
</li>
</ul>জাতীয়:
angular.module('Repeat_Demo', [])
.directive('repeatDone', function() {
return function(scope, element, attrs) {
if (scope.$last) { // all are rendered
scope.$eval(attrs.repeatDone);
}
}
})
.filter('strip_http', function() {
return function(str) {
var http = "http://";
return (str.indexOf(http) == 0) ? str.substr(http.length) : str;
}
})
.filter('hostName', function() {
return function(str) {
var urlParser = document.createElement('a');
urlParser.href = str;
return urlParser.hostname;
}
})
.controller('AppCtrl', function($scope, $timeout) {
$scope.feedList = [
'http://feeds.feedburner.com/TEDTalks_video',
'http://feeds.nationalgeographic.com/ng/photography/photo-of-the-day/',
'http://sfbay.craigslist.org/eng/index.rss',
'http://www.slate.com/blogs/trending.fulltext.all.10.rss',
'http://feeds.current.com/homepage/en_US.rss',
'http://feeds.current.com/items/popular.rss',
'http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml'
];
$scope.layoutDone = function() {
//$('a[data-toggle="tooltip"]').tooltip(); // NOT CORRECT!
$timeout(function() { $('a[data-toggle="tooltip"]').tooltip(); }, 0); // wait...
}
})এখানে একটি সাধারণ পদ্ধতির ব্যবহার ng-initযা এমনকি কোনও কাস্টম নির্দেশের প্রয়োজন হয় না। এটি আমার জন্য বেশ কয়েকটি দৃশ্যে ভাল কাজ করেছে যেমন পৃষ্ঠা লোডের একটি নির্দিষ্ট আইটেমের জন্য এনজি-পুনরাবৃত্তি আইটেমগুলির একটি ডিভিও অটো-স্ক্রোল করা দরকার, সুতরাং স্ক্রোলিং ফাংশনটি ng-repeatদমনে আগুনের আগে ডমকে রেন্ডারিং শেষ না হওয়া পর্যন্ত অপেক্ষা করা উচিত ।
<div ng-controller="MyCtrl">
<div ng-repeat="thing in things">
thing: {{ thing }}
</div>
<div ng-init="fireEvent()"></div>
</div>myModule.controller('MyCtrl', function($scope, $timeout){
$scope.things = ['A', 'B', 'C'];
$scope.fireEvent = function(){
// This will only run after the ng-repeat has rendered its things to the DOM
$timeout(function(){
$scope.$broadcast('thingsRendered');
}, 0);
};
});মনে রাখবেন যে এটি প্রাথমিকভাবে এনজি-রিপিটেন্ড রেন্ডারগুলির পরে আপনাকে একবার কল করতে হবে এমন ফাংশনগুলির জন্য দরকারী। যখনই এনজি-রিপিট সামগ্রীগুলি আপডেট করা হয় তখন আপনাকে কোনও ফাংশন কল করতে হবে তবে আপনাকে এই থ্রেডে অন্য একটি উত্তর কাস্টম নির্দেশ সহ ব্যবহার করতে হবে।
পাভেলের উত্তরটি পরিপূরক করা , আরও পাঠযোগ্য এবং সহজেই বোধগম্য কিছু হ'ল:
<ul>
<li ng-repeat="item in items"
ng-init="$last ? doSomething() : angular.noop()">{{item}}</li>
</ul>আপনি কেন angular.noopপ্রথম স্থানে আছেন বলে মনে করেন ...?
সুবিধাদি:
এর জন্য আপনাকে কোনও নির্দেশিকা লিখতে হবে না ...
ng-init="$last && doSomething( )"
কাস্টম নির্দেশাবলীর প্রয়োজন ছাড়াই ngInitএবং লোডাসের পদ্ধতির সাথে কিছুটা সহজ পদ্ধতির হতে পারে debounce:
নিয়ন্ত্রক:
$scope.items = [1, 2, 3, 4];
$scope.refresh = _.debounce(function() {
// Debounce has timeout and prevents multiple calls, so this will be called
// once the iteration finishes
console.log('we are done');
}, 0);টেমপ্লেট:
<ul>
<li ng-repeat="item in items" ng-init="refresh()">{{item}}</li>
</ul>টের্নারি অপারেটরটি ব্যবহার করে এমনকি আরও সহজ খাঁটি AngularJS সমাধান রয়েছে:
টেমপ্লেট:
<ul>
<li ng-repeat="item in items" ng-init="$last ? doSomething() : null">{{item}}</li>
</ul>সচেতন থাকুন যে এনজিআইএনটি প্রাক-লিঙ্ক সংকলন পর্বটি ব্যবহার করে - অর্থাত শিশু নির্দেশাবলী প্রক্রিয়া করার আগে এই অভিব্যক্তিটি চাওয়া হয়। এর অর্থ এখনও অ্যাসিক্রোনাস প্রসেসিংয়ের প্রয়োজন হতে পারে।
ng-init="$last ? refresh() : false"কাজ করবে। এবং এটি এমনকি লোডাশ প্রয়োজন হয় না।
scope.$lastআপনার ট্রিগারটি একটি দিয়ে মোড়ানোর জন্য যখন ভেরিয়েবলটি পরীক্ষা করা হয় তখন এটি প্রয়োজনীয়ও হতে পারে setTimeout(someFn, 0)। এ setTimeout 0জাভাস্ক্রিপ্টের একটি স্বীকৃত কৌশল এবং এটি directiveসঠিকভাবে চালানো আমার পক্ষে জরুরি।
ঘোষণামূলক বাক্য গঠন এবং বিচ্ছিন্ন সুযোগ ব্যবহার করার সময় কীভাবে এনজিআরপিট বৈশিষ্ট্যগুলিতে ($ সূচক, $ প্রথম, $ মাঝারি, $ শেষ, $ এমনকি, $ বিজোড়) অ্যাক্সেস অর্জন করবেন তা দেখানোর জন্য এটি অন্যান্য উত্তরে প্রকাশিত ধারণার উন্নতি ( একটি উপাদান-নির্দেশনা সহ গুগল সেরা অনুশীলনের প্রস্তাব দিয়েছে)। উল্লেখ্য মূল পার্থক্য: scope.$parent.$last।
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return {
restrict: 'E',
scope: {
someAttr: '='
},
link: function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$parent.$last){
window.alert("im the last!");
}
}
};
});আমি এইভাবে এটি করেছি।
দিকনির্দেশনা তৈরি করুন
function finRepeat() {
return function(scope, element, attrs) {
if (scope.$last){
// Here is where already executes the jquery
$(document).ready(function(){
$('.materialboxed').materialbox();
$('.tooltipped').tooltip({delay: 50});
});
}
}
}
angular
.module("app")
.directive("finRepeat", finRepeat);আপনি লেবেলে এটি যুক্ত করার পরে যেখানে এই এনজি-রিপিট করুন
<ul>
<li ng-repeat="(key, value) in data" fin-repeat> {{ value }} </li>
</ul>এবং এর সাথে প্রস্তুত এনজি-রিপিট শেষে চালানো হবে।
আমি আরেকটি উত্তর যুক্ত করতে চাই, কারণ পূর্ববর্তী উত্তরগুলি বলে যে এনজিরাপিট সম্পন্ন হওয়ার পরে কোডটি চালানোর জন্য প্রয়োজনীয় কোডটি একটি কৌণিক কোড, যা সেক্ষেত্রে উপরের সমস্ত উত্তর একটি দুর্দান্ত এবং সাধারণ সমাধান দেয়, যা অন্যদের চেয়ে কিছুটা জেনেরিক, এবং এর ক্ষেত্রে ডাইজেস্ট লাইফ চক্রের পর্যায়েটি গুরুত্বপূর্ণ হলে আপনি বেন নাদেলের ব্লগটি সম্পর্কে, ইভালের পরিবর্তে ars পার্স ব্যবহার ব্যতীত এ সম্পর্কে একবার দেখতে পারেন।
তবে আমার অভিজ্ঞতা হিসাবে, ওপি যেমন বলেছে, সাধারণত এটি ফিনালি সংকলিত ডিওমে কিছু জিকিউরি প্লাগইন বা পদ্ধতিগুলি চালিত করে, সে ক্ষেত্রে আমি দেখতে পেলাম যে সবচেয়ে সহজ সমাধানটি সেটটাইমআউট দিয়ে একটি নির্দেশিকা তৈরি করা, যেহেতু সেটটাইমআউট ফাংশনটি ধাক্কা হয়ে যায় since ব্রাউজারের সারির শেষে, সবসময় কৌণিকভাবে কাজ করার পরে ডানদিকে ঠিক থাকে সাধারণত এনজিআরপিট যা তার পিতামাতার পোস্ট লিঙ্কিংয়ের পরেও অব্যাহত থাকে
angular.module('myApp', [])
.directive('pluginNameOrWhatever', function() {
return function(scope, element, attrs) {
setTimeout(function doWork(){
//jquery code and plugins
}, 0);
};
});যে কেউ ভাবছেন যে সে ক্ষেত্রে কেন $ সময়সীমা ব্যবহার করবেন না, এটি হ'ল এটি অন্য একটি হজম চক্র যা সম্পূর্ণ অপ্রয়োজনীয়
এনজি-রিপিট শেষ হওয়ার পরে আমাকে ম্যাথজ্যাক্স ব্যবহার করে সূত্রগুলি রেন্ডার করতে হয়েছিল, উপরের উত্তরগুলির কোনওোটাই আমার সমস্যার সমাধান করেনি, তাই আমি নীচের মত তৈরি করেছি। এটি খুব ভাল সমাধান নয় , তবে আমার জন্য কাজ করেছে ...
<div ng-repeat="formula in controller.formulas">
<div>{{formula.string}}</div>
{{$last ? controller.render_formulas() : ""}}
</div>আমি এখানে ভাল অনুশীলন করে একটি উত্তর পেয়েছি , তবে আরও একটি বিলম্ব যোগ করার প্রয়োজন ছিল
নিম্নলিখিত নির্দেশ তৈরি করুন:
angular.module('MyApp').directive('emitLastRepeaterElement', function() {
return function(scope) {
if (scope.$last){
scope.$emit('LastRepeaterElement');
}
}; });এটিকে আপনার গুণক হিসাবে একটি পুনরায় হিসাবে যুক্ত করুন:
<div ng-repeat="item in items" emit-last-repeater-element></div>রাদুর মতে:
$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {mycode});আমার জন্য এটি কাজ করে তবে আমার এখনও একটি সেটটাইমআউট যুক্ত করতে হবে
$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {
setTimeout(function() {
mycode
}, 100); });আপনি যদি কেবল ক্লাসের নাম পরিবর্তন করতে চান তবে এটি আলাদাভাবে রেন্ডার হবে, নীচে কোডটি কৌশলটি করবে।
<div>
<div ng-show="loginsuccess" ng-repeat="i in itemList">
<div id="{{i.status}}" class="{{i.status}}">
<div class="listitems">{{i.item}}</div>
<div class="listitems">{{i.qty}}</div>
<div class="listitems">{{i.date}}</div>
<div class="listbutton">
<button ng-click="UpdateStatus(i.$id)" class="btn"><span>Done</span></button>
<button ng-click="changeClass()" class="btn"><span>Remove</span></button>
</div>
<hr>
</div>এই কোডটি আমার পক্ষে কাজ করেছিল যখন আমার শপিং তালিকায় স্ট্রিক ট্রট ফন্টে শপিং করা আইটেমটি রেন্ডার করার জন্য আমার অনুরূপ প্রয়োজনীয়তা ছিল।
myMainDirectiveলুপ শেষ হওয়ার পরে কোডটি কার্যকর করতে পারি ? প্যারেন্ট ডিভের স্ক্রোলবারটি আমার আপডেট করতে হবে।