- जब एक मोडल खोला जाता है, तो इस मोडल के अंदर एक पूर्वनिर्धारित <इनपुट> पर ध्यान केंद्रित करें।
एक निर्देश को परिभाषित करें और इसके पास $ प्रॉपर्टी / ट्रिगर देखें ताकि यह पता चले कि तत्व को कब फोकस करना है:
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
अपडेट 7/2013 : मैंने देखा है कि कुछ लोग मेरे मूल अलग-अलग गुंजाइश निर्देशों का उपयोग करते हैं और फिर एम्बेडेड इनपुट फ़ील्ड (यानी, मोडल में एक इनपुट फ़ील्ड) के साथ समस्या है। कोई नया दायरा (या संभवत: एक नया बच्चा गुंजाइश) वाला निर्देश कुछ दर्द को कम कर सकता है। तो ऊपर मैंने अलग-अलग स्कैप्स का उपयोग न करने के उत्तर को अपडेट किया। नीचे मूल उत्तर है:
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();
});
}
});
}
};
});
प्लंकर ।
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;
//});
}
});
}
};
});
प्लंकर ।
चूँकि हमें निर्देशन में ट्रिगर / फ़ोकस इंपुट संपत्ति को रीसेट करने की आवश्यकता है, इसलिए '=' का उपयोग दो तरफ़ा डेटाबाइंडिंग के लिए किया जाता है। पहले निर्देशन में, '@' पर्याप्त था। यह भी ध्यान दें कि '@' का उपयोग करते समय हम ट्रिगर मूल्य की तुलना "सत्य" से करते हैं क्योंकि @ हमेशा एक स्ट्रिंग में परिणाम होता है।