- যখন কোনও মডেল খোলা হয়, তখন এই মডেলের অভ্যন্তরে পূর্বনির্ধারিত <ইনপুট> এ ফোকাস সেট করুন।
একটি নির্দেশিকা সংজ্ঞায়িত করুন এবং এতে থাকুন a কোনও সম্পত্তি / ট্রিগার দেখুন যাতে উপাদানটির ফোকাস কখন করা উচিত তা তা জানে:
Name: <input type="text" focus-me="shouldBeOpen">
app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function (scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function (value) {
console.log('value=', value);
if (value === true) {
$timeout(function () {
element[0].focus();
});
}
});
// to address @blesh's comment, set attribute value to 'false'
// on blur event:
element.bind('blur', function () {
console.log('blur');
scope.$apply(model.assign(scope, false));
});
}
};
}]);
Plunker
সময়সীমাটি রেন্ডার করার জন্য মডেল সময় দেওয়ার প্রয়োজন বলে মনে হচ্ছে।
'2.' প্রতিবার <ইনপুট> দৃশ্যমান হয়ে যায় (উদাহরণস্বরূপ কিছু বোতামে ক্লিক করে), এতে ফোকাস সেট করুন।
উপরোক্তটির মতো মূলত একটি নির্দেশিকা তৈরি করুন। কিছু স্কোপ সম্পত্তি দেখুন এবং এটি সত্য হয়ে উঠলে (এটি আপনার এনজি-ক্লিক হ্যান্ডলারের মধ্যে সেট করুন) কার্যকর করুন element[0].focus()। আপনার ব্যবহারের ক্ষেত্রে উপর নির্ভর করে আপনার এটির জন্য $ সময়সীমা প্রয়োজন বা নাও হতে পারে:
<button class="btn" ng-click="showForm=true; focusInput=true">show form and
focus input</button>
<div ng-show="showForm">
<input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
<button class="btn" ng-click="showForm=false">hide form</button>
</div>
app.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.focusMe, function(value) {
if(value === true) {
console.log('value=',value);
//$timeout(function() {
element[0].focus();
scope[attrs.focusMe] = false;
//});
}
});
}
};
});
Plunker
আপডেট /201 / ২০১৩ : আমি দেখেছি কয়েকজন লোক আমার মূল বিচ্ছিন্ন স্কোপ নির্দেশিকা ব্যবহার করে এবং তারপরে এম্বেডড ইনপুট ক্ষেত্রগুলি (যেমন, মডেলের একটি ইনপুট ক্ষেত্র) নিয়ে সমস্যা থাকে। কোনও নতুন সুযোগ (বা সম্ভবত একটি নতুন শিশু সুযোগ) নেই এমন একটি নির্দেশের ব্যথা কিছুটা উপশম করা উচিত। সুতরাং উপরে আমি পৃথক স্কোপগুলি ব্যবহার না করার উত্তরটি আপডেট করেছি। নীচে মূল উত্তরটি দেওয়া হল:
1 এর মূল উত্তর, বিচ্ছিন্ন সুযোগ ব্যবহার করে:
Name: <input type="text" focus-me="{{shouldBeOpen}}">
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '@focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
});
}
});
}
};
});
Plunker ।
2 এর মূল উত্তর, বিচ্ছিন্ন সুযোগ ব্যবহার করে:
<button class="btn" ng-click="showForm=true; focusInput=true">show form and
focus input</button>
<div ng-show="showForm">
<input type="text" focus-me="focusInput">
<button class="btn" ng-click="showForm=false">hide form</button>
</div>
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '=focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === true) {
//console.log('trigger',value);
//$timeout(function() {
element[0].focus();
scope.trigger = false;
//});
}
});
}
};
});
Plunker ।
যেহেতু আমাদের নির্দেশে ট্রিগার / ফোকাসইপুট সম্পত্তিটিকে পুনরায় সেট করতে হবে, তাই দ্বি-মুখী ডেটাবেন্ডিংয়ের জন্য '=' ব্যবহৃত হয়। প্রথম নির্দেশনায় '@' যথেষ্ট ছিল। এছাড়াও মনে রাখবেন যে '@' ব্যবহার করার সময় আমরা ট্রিগার মানটিকে "সত্য" সাথে তুলনা করি যেহেতু @ সর্বদা একটি স্ট্রিংয়ের ফলস্বরূপ।