दिलचस्प पोस्ट
Google मैप्स एपीआई में रूट के बीच मूल और गंतव्य के साथ स्थान प्राप्त करने के तरीके (जैसे गैस स्टेशन) बूट समय एंड्रॉइड पर लॉन्च / लॉन्च कैसे करें Android वर्चुअल डिवाइस बनाने में असमर्थ मैं एक खाली स्ट्रिंग को MySQL में डालने से रोकने के लिए एक बाधा तलाश रहा हूं पर्यावरण का उपयोग करके ओएस निर्धारित करें। OSVersion अजगर: सूचियों की एक सूची से डुप्लिकेट को निकालना एक फार्म में एक इनपुट फ़ील्ड को प्रस्तुत किए जाने से रोकें पुनरावर्ती फ़ाइल खोज (PHP) ओकेएचटीपी का उपयोग करते हुए बहुस्तृत में एक बड़ी फ़ाइल अपलोड करना Ggplot2 का उपयोग करते हुए अक्ष पर केवल पूर्णांक मान प्रदर्शित करने के लिए आईओएस अस्थायी फ़ोल्डर स्थान डाटा स्टोअर स्ट्रक्चर / क्लासेस के लिए सबसे अच्छा कौन सा है? jQuery टेम्पलेटिंग इंजन मैं Stemming या Lemmatization शब्द कैसे करूं? कैसे जावास्क्रिप्ट के साथ एक स्थानीय डिस्क फ़ाइल खोलने के लिए?

इनपुट फ़ील्ड पर फोकस कैसे सेट करना है?

AngularJS में इनपुट फील्ड पर फ़ोकस सेट करने के लिए 'कोनालर वे' क्या है?

अधिक विशिष्ट आवश्यकताएं:

  1. जब एक मॉडल खोला जाता है, तो इस मॉडल के अंदर एक पूर्वनिर्धारित <input> पर फ़ोकस सेट करें
  2. हर बार <input> दिखाई देता है (उदाहरण के लिए कुछ बटन पर क्लिक करके), उस पर फ़ोकस सेट करें।

मैंने autofocus साथ पहली आवश्यकता को हासिल करने की कोशिश की , लेकिन यह केवल तब ही काम करता है जब मॉडल पहली बार खोला जाता है, और केवल कुछ ब्राउज़रों में (जैसे फ़ायरफ़ॉक्स में यह काम नहीं करता है)।

किसी भी तरह की सहायता को आभार समझेंगे।

Solutions Collecting From Web of "इनपुट फ़ील्ड पर फोकस कैसे सेट करना है?"

  1. जब एक मॉडल खोला जाता है, तो इस मॉडल के अंदर एक पूर्वनिर्धारित <input> पर फ़ोकस सेट करें

निर्देश को परिभाषित करें और इसे $ / संपत्ति को ट्रिगर रखें ताकि तत्व को फ़ोकस करने पर यह जान जाए:

 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.' हर बार <input> दिखाई देता है (उदाहरण के लिए कुछ बटन पर क्लिक करके), उस पर फ़ोकस सेट करें।

उपरोक्त की तरह एक अनिवार्य निर्देश प्राप्त करें कुछ गुंजाइश की संपत्ति देखें, और जब यह सत्य हो जाता है (इसे अपने एनजी क्लिक हेन्डलर में सेट करें), निष्पादित 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. पृथक गुंजाइश का उपयोग करते हुए, 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; //}); } }); } }; }); 

प्लंकर

चूंकि हमें डायरेक्टिव में ट्रिगर / फोकस इनपुट प्रॉपर्टी को रीसेट करने की आवश्यकता है, इसलिए '=' दो-तरफ़ा डाटाबेसिंग के लिए उपयोग किया जाता है। पहले निर्देश में, '@' पर्याप्त था यह भी ध्यान रखें कि '@' का प्रयोग करते समय हम ट्रिगर मान की तुलना "सच्चे" से करते हैं, चूंकि @ हमेशा एक स्ट्रिंग में परिणाम होते हैं।

(संपादित करें: मैंने इस स्पष्टीकरण के नीचे अद्यतन समाधान जोड़ा है)

मार्क राजकोक आदमी है … और उनका जवाब एक वैध जवाब है, लेकिन इसमें एक दोष है (माफ मार्क) …

… इनपुट पर ध्यान केंद्रित करने के लिए बूलियन का उपयोग करने का प्रयास करें, फिर इनपुट को धुंधला दें, फिर इनपुट को फिर से फोकस करने के लिए इसका उपयोग करने का प्रयास करें यह तब तक काम नहीं करेगा जब तक कि आप बूलियन को गलत पर रीसेट न करें, फिर $ डाइजेस्ट, फिर इसे सही पर वापस रीसेट करें। यहां तक ​​कि अगर आप अपनी अभिव्यक्ति की तुलना में स्ट्रिंग की तुलना करते हैं, तो आपको स्ट्रिंग को कुछ और, $ डाइजेस्ट में परिवर्तित करने के लिए मजबूर किया जाएगा, फिर इसे वापस बदलें। (यह धुंधला ईवेंट हैंडलर से संबोधित किया गया है।)

तो मैं इस वैकल्पिक समाधान का प्रस्ताव:

एक घटना का उपयोग करें, कांच की भूल की सुविधा

जावास्क्रिप्ट सब के बाद घटनाओं प्यार करता है घटनाएं स्वाभाविक रूप से ढीले युग्मित हैं, और इससे भी बेहतर, आप अपने $ डाइजेस्ट में एक और $ वॉयस जोड़ने से बचें

 app.directive('focusOn', function() { return function(scope, elem, attr) { scope.$on(attr.focusOn, function(e) { elem[0].focus(); }); }; }); 

तो अब आप इसे इस तरह प्रयोग कर सकते हैं:

 <input type="text" focus-on="newItemAdded" /> 

और फिर अपने ऐप में कहीं भी …

 $scope.addNewItem = function () { /* stuff here to add a new item... */ $scope.$broadcast('newItemAdded'); }; 

यह कमाल है क्योंकि आप इस तरह से कुछ के साथ हर तरह की चीजें कर सकते हैं। एक के लिए, आप उन घटनाओं में बाँट सकते हैं जो पहले से मौजूद हैं। एक और चीज के लिए आप अपने एप प्रकाशित होने वाले ईवेंट के विभिन्न हिस्सों के द्वारा कुछ स्मार्ट करना शुरू करते हैं, जो आपके ऐप के अन्य भागों की सदस्यता ले सकते हैं।

किसी भी तरह, इस प्रकार की चीज मेरे लिए "घटना संचालित" चिल्लाती है मुझे लगता है कि कोणीय डेवलपर्स के रूप में हम वास्तव में कठिन परिश्रम करने के लिए $ आकार के खूंटे को घटना के आकार के छेद में हथौड़ा करते हैं।

क्या यह सबसे अच्छा समाधान है? मुझे नही पता। यह एक समाधान है


अद्यतन समाधान

@ शिमोनराचलेनको की टिप्पणी के बाद, मैंने इसे थोड़ा सा करने की मेरी विधि बदल दी है। अब मैं एक सेवा और एक निर्देश का एक संयोजन का उपयोग करता हूं जो "पर्दे के पीछे" एक घटना को संभालता है:

इसके अलावा, इसके ऊपर उल्लिखित एक ही प्रिंसिपल है

यहां एक त्वरित डेमो प्लंक है

प्रयोग

 <input type="text" focus-on="focusMe"/> 
 app.controller('MyCtrl', function($scope, focus) { focus('focusMe'); }); 

स्रोत

 app.directive('focusOn', function() { return function(scope, elem, attr) { scope.$on('focusOn', function(e, name) { if(name === attr.focusOn) { elem[0].focus(); } }); }; }); app.factory('focus', function ($rootScope, $timeout) { return function(name) { $timeout(function (){ $rootScope.$broadcast('focusOn', name); }); } }); 

मुझे कुछ अन्य जवाब मिल गए हैं जब आप सभी को वास्तव में जरूरी कर रहे हैं, यह अधिक जटिल है

 app.directive('autoFocus', function($timeout) { return { restrict: 'AC', link: function(_scope, _element) { $timeout(function(){ _element[0].focus(); }, 0); } }; }); 

उपयोग है

 <input name="theInput" auto-focus> 

हम टाइमआउट का उपयोग डोम में प्रस्तुत करने के लिए करते हैं, हालांकि यह शून्य है, यह कम से कम इसके लिए इंतजार करता है – इस तरह से यह मोडलों में काम करता है और जो भी होता है

एचटीएमएल में एक विशेषता autofocus

 <input type="text" name="fname" autofocus> 

http://www.w3schools.com/tags/att_input_autofocus.asp

आप कोणीय में निर्मित jqlite कार्यक्षमता का भी उपयोग कर सकते हैं।

angular.element('.selector').trigger('focus');

यह अच्छी तरह से काम करता है और इनपुट नियंत्रण पर ध्यान केंद्रित करने के लिए एक कोणीय तरीका है

 angular.element('#elementId').focus() 

यद्यपि यह कार्य करने का शुद्ध कोणीय तरीका नहीं है, फिर भी सिंटेक्स इस प्रकार कोणीय शैली के अनुसार है Jquery भूमिका निभाता है परोक्ष रूप से सीधे और सीधे डोम का उपयोग Angular (jmlite => JQuery लाइट)।

यदि आवश्यक हो, तो यह कोड आसानी से एक सरल कोणीय निर्देश के अंदर रखा जा सकता है जहां तत्व सीधे पहुंचा जा सकता है।

मुझे नहीं लगता कि $ टाइमआउट सृजन पर तत्व को केंद्रित करने का एक अच्छा तरीका है। यहां कोणीय कार्यक्षमता का उपयोग करते हुए एक विधि है, जो कोणीय डॉक्स के गहराई से गहराई से खोदला हुआ है। ध्यान दें कि "लिंक" विशेषता को "प्री" और "पोस्ट" में विभाजित किया जा सकता है, प्री-लिंक और पोस्ट-लिंक फ़ंक्शन के लिए।

कार्यशील उदाहरण: http://plnkr.co/edit/Fj59GB

 // this is the directive you add to any element you want to highlight after creation Guest.directive('autoFocus', function() { return { link: { pre: function preLink(scope, element, attr) { console.debug('prelink called'); // this fails since the element hasn't rendered //element[0].focus(); }, post: function postLink(scope, element, attr) { console.debug('postlink called'); // this succeeds since the element has been rendered element[0].focus(); } } } }); 
 <input value="hello" /> <!-- this input automatically gets focus on creation --> <input value="world" auto-focus /> 

पूर्ण कोणीय जेएस डायरेक्टिव डॉक्स: https://docs.angularjs.org/api/ng/service/$compile

यहां मेरा मूल समाधान है:

plunker

 var app = angular.module('plunker', []); app.directive('autoFocus', function($timeout) { return { link: function (scope, element, attrs) { attrs.$observe("autoFocus", function(newValue){ if (newValue === "true") $timeout(function(){element[0].focus()}); }); } }; }); 

और एचटीएमएल:

 <button ng-click="isVisible = !isVisible">Toggle input</button> <input ng-show="isVisible" auto-focus="{{ isVisible }}" value="auto-focus on" /> 

यह क्या करता है:

यह इनपुट को केंद्रित करता है क्योंकि यह एनजी-शो के साथ दिखाई देता है यहां पर $ वॉच या $ का कोई फायदा नहीं।

मैंने हाल ही में मॉडल की तरह, दो तरह से बाध्यकारी फोकस निर्देश लिखे हैं

आप इस तरह फोकस निर्देश का उपयोग करते हैं:

 <input focus="someFocusVariable"> 

यदि आप अपने नियंत्रक में कहीं भी कुछ फोकसवेरिएबल स्कोप वैरिएबल बनाते हैं, इनपुट को ध्यान मिलता है और अगर आप अपना इनपुट "धुंधला" करते हैं, तो कुछ फ़ोकसवायरबल झूठे पर सेट होता है यह मार्क राजकोक का पहला जवाब है लेकिन दो तरह से बाध्यकारी है।

यहां निर्देश है:

 function Ctrl($scope) { $scope.model = "ahaha" $scope.someFocusVariable = true; // If you want to focus initially, set this to true. Else you don't need to define this at all. } angular.module('experiement', []) .directive('focus', function($timeout, $parse) { return { restrict: 'A', link: function(scope, element, attrs) { scope.$watch(attrs.focus, function(newValue, oldValue) { if (newValue) { element[0].focus(); } }); element.bind("blur", function(e) { $timeout(function() { scope.$apply(attrs.focus + "=false"); }, 0); }); element.bind("focus", function(e) { $timeout(function() { scope.$apply(attrs.focus + "=true"); }, 0); }) } } }); 

उपयोग:

 <div ng-app="experiement"> <div ng-controller="Ctrl"> An Input: <input ng-model="model" focus="someFocusVariable"> <hr> <div ng-click="someFocusVariable=true">Focus!</div> <pre>someFocusVariable: {{ someFocusVariable }}</pre> <pre>content: {{ model }}</pre> </div> </div> 

यहाँ बेला है:

http://fiddle.jshell.net/ubenzer/9FSL4/8/

जो लोग बूटस्ट्रैप प्लगइन के साथ कोणीय का उपयोग करते हैं:

http://angular-ui.github.io/bootstrap/#/modal

आप मॉडल आवृत्ति के opened वादा में हुक कर सकते हैं:

 modalInstance.opened.then(function() { $timeout(function() { angular.element('#title_input').trigger('focus'); }); }); modalInstance.result.then(function ( etc... 

अपना खुद का निर्देशन करने के बजाय, फ़ोकस पूरा करने के लिए बस जावास्क्रिप्ट फ़ंक्शंस का उपयोग करना संभव है

यहाँ एक उदाहरण है।

Html फ़ाइल में:

 <input type="text" id="myInputId" /> 

एक फ़ाइल जावास्क्रिप्ट में, उदाहरण के लिए नियंत्रक में, जहां आप फ़ोकस को सक्रिय करना चाहते हैं:

 document.getElementById("myInputId").focus(); 

ज़ोंबी को पुन: उठाने या अपने खुद के निर्देश को प्लग करने के लिए नहीं (ठीक है कि मैं वास्तव में क्या कर रहा हूं):

https://github.com/hiebj/ng-focus-if

http://plnkr.co/edit/MJS3zRk079Mu72o5A9l6?p=preview

 <input focus-if /> (function() { 'use strict'; angular .module('focus-if', []) .directive('focusIf', focusIf); function focusIf($timeout) { function link($scope, $element, $attrs) { var dom = $element[0]; if ($attrs.focusIf) { $scope.$watch($attrs.focusIf, focus); } else { focus(true); } function focus(condition) { if (condition) { $timeout(function() { dom.focus(); }, $scope.$eval($attrs.focusDelay) || 0); } } } return { restrict: 'A', link: link }; } })(); 

सबसे पहले, फोकस करने का एक आधिकारिक तरीका 1.1 के लिए रोडमैप पर है। इस बीच, आप सेटिंग फोकस को कार्यान्वित करने के लिए एक निर्देश लिख सकते हैं।

दूसरा, एक आइटम पर फ़ोकस सेट करने के लिए वर्तमान में दृश्यमान हो जाने के बाद एक वैकल्पिक हल की आवश्यकता है सिर्फ $timeout साथ तत्व फोकस () पर कॉल $timeout

क्योंकि एक ही नियंत्रक-संशोधित- DOM समस्या फोकस, धुँधली और चयन के लिए मौजूद है, मैं एक ng-target निर्देश जारी करने का प्रस्ताव देता हूं:

 <input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget"> <button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button> 

यहां का कोणीय धागा: http://goo.gl/ipsx4 , और अधिक विवरण यहां ब्लॉग: http://goo.gl/4rdZa

निम्नलिखित निदेश आपके ng-target विशेषता द्वारा निर्दिष्ट के रूप में आपके नियंत्रक के अंदर .focus() फ़ंक्शन .focus() । (यह एक .blur() और एक .select() भी बनाता है।) डेमो: http://jsfiddle.net/bseib/WUcQX/

मैंने एक सामान्य अभिव्यक्ति का उपयोग करने के लिए उपयोगी पाया। इस तरह से आप सामान को स्वचालित रूप से फ़ोकस कर सकते हैं जैसे इनपुट पाठ वैध है

 <button type="button" moo-focus-expression="form.phone.$valid"> 

या स्वचालित रूप से फ़ोकस करते हैं जब उपयोगकर्ता एक निश्चित लंबाई फ़ील्ड पूरा करता है

 <button type="submit" moo-focus-expression="smsconfirm.length == 6"> 

और बेशक लोड के बाद ध्यान केंद्रित

 <input type="text" moo-focus-expression="true"> 

निर्देश के लिए कोड:

 .directive('mooFocusExpression', function ($timeout) { return { restrict: 'A', link: { post: function postLink(scope, element, attrs) { scope.$watch(attrs.mooFocusExpression, function (value) { if (attrs.mooFocusExpression) { if (scope.$eval(attrs.mooFocusExpression)) { $timeout(function () { element[0].focus(); }, 100); //need some delay to work with ng-disabled } } }); } } }; }); 

यदि आप एक साधारण फ़ोकस चाहते थे जो एनजी-क्लिक द्वारा नियंत्रित किया गया था।

एचटीएमएल:

 <input ut-focus="focusTigger"> <button ng-click="focusTrigger=!focusTrigger" ng-init="focusTrigger=false"></button> 

निर्देशक:

 'use strict' angular.module('focus',['ng']) .directive('utFocus',function($timeout){ return { link:function(scope,elem,attr){ var focusTarget = attr['utFocus']; scope.$watch(focusTarget,function(value){ $timeout(function(){ elem[0].focus(); }); }); } } }); 

एक आसान तरीका है जो मॉडल के साथ अच्छी तरह से काम करता है:

 .directive('focusMeNow', ['$timeout', function ($timeout) { return { restrict: 'A', link: function (scope, element, attrs) { $timeout(function () { element[0].focus(); }); } }; }]) 

उदाहरण

 <input ng-model="your.value" focus-me-now /> 

आप सिर्फ एक निर्देश बना सकते हैं जो पोस्ट लिंकींग पर सजाए गए तत्वों पर ध्यान केंद्रित करता है:

 angular.module('directives') .directive('autoFocus', function() { return { restrict: 'AC', link: function(_scope, _element) { _element[0].focus(); } }; }); 

फिर अपने html में:

 <input type="text" name="first" auto-focus/> <!-- this will get the focus --> <input type="text" name="second"/> 

यह मोडल और एनजी-यदि टॉगल किए गए तत्वों के लिए काम करेगा, एनजी-शो के लिए नहीं, चूंकि पोस्ट लिंकींग केवल एचटीएमएल प्रसंस्करण पर होता है

मार्क और Blesh महान जवाब है; हालांकि, मार्क की एक दोष है कि बल्लेश (कार्यान्वयन के जटिल होने के अलावा) को बताते हैं, और मुझे लगता है कि बल्लेश के उत्तर में एक सेवा बनाने में एक सिमेंटिक त्रुटि है जो विशेष रूप से अग्रभाग के लिए फ़ोकस अनुरोध भेजने के बारे में है, जब वास्तव में वह सभी की ज़रूरत थी जब तक कि सभी निर्देश सुन रहे हों तब तक ईवेंट को विलंब करें।

तो यह है कि मैं क्या कर रहा हूं जो बल्लेश के उत्तर से बहुत कुछ चुराता है लेकिन नियंत्रक की घटनाओं और "बाद लोड" सेवा को अलग-अलग सिमेंटिक्स रखता है।

यह नियंत्रक की घटना को आसानी से एक विशिष्ट तत्व को ध्यान केंद्रित करने के अलावा अन्य चीज़ों के लिए आसानी से लगाया जा सकता है और "केवल भार के बाद" कार्यक्षमता के उपरांत को केवल तभी आवश्यक है जब यह आवश्यक हो, जो यह कई मामलों में नहीं हो सकता है।

प्रयोग

 <input type="text" focus-on="controllerEvent"/> 
 app.controller('MyCtrl', function($scope, afterLoad) { function notifyControllerEvent() { $scope.$broadcast('controllerEvent'); } afterLoad(notifyControllerEvent); }); 

स्रोत

 app.directive('focusOn', function() { return function(scope, elem, attr) { scope.$on(attr.focusOn, function(e, name) { elem[0].focus(); }); }; }); app.factory('afterLoad', function ($rootScope, $timeout) { return function(func) { $timeout(func); } }); 

यहां सिर्फ एक नौसिखिया है, लेकिन मैं इस निर्देश के साथ इसे यूआई.बुस्टस्ट्रैप.मॉडल में काम करने के लिए तैयार था:

 directives.directive('focus', function($timeout) { return { link : function(scope, element) { scope.$watch('idToFocus', function(value) { if (value === element[0].id) { $timeout(function() { element[0].focus(); }); } }); } }; }); 

और $ modal.open विधि में मैं उस तत्व को इंगित करने के लिए नीचे का उपयोग किया था जहां फोकस डाल दिया जाना चाहिए:

 var d = $modal.open({ controller : function($scope, $modalInstance) { ... $scope.idToFocus = "cancelaAteste"; } ... }); 

टेम्पलेट पर मेरे पास यह है:

 <input id="myInputId" focus /> 

मैं 'मार्क राजकोक' फोकस को संपादित करता हूंएक तत्व में कई फोकस के लिए काम करने का निर्देश

HTML:

 <input focus-me="myInputFocus" type="text"> 

AngularJs नियंत्रक में:

 $scope.myInputFocus= true; 

अंगुलाजेएस निर्देशक:

 app.directive('focusMe', function ($timeout, $parse) { return { link: function (scope, element, attrs) { var model = $parse(attrs.focusMe); scope.$watch(model, function (value) { if (value === true) { $timeout(function () { scope.$apply(model.assign(scope, false)); element[0].focus(); }, 30); } }); } }; }); 

निम्नलिखित निर्देश मेरे लिए चाल किया था इनपुट के लिए एक ही ऑटोफोकस HTML विशेषता का उपयोग करें

 .directive('autofocus', [function () { return { require : 'ngModel', restrict: 'A', link: function (scope, element, attrs) { element.focus(); } }; }]) 

यदि आप modalInstance का उपयोग कर रहे हैं और वस्तु है तो आप "फिर" मोडल खोलने के बाद कार्रवाई करने के लिए उपयोग कर सकते हैं यदि आप मोडल इंस्टेंस का उपयोग नहीं कर रहे हैं, और मॉडल को खोलने के लिए कड़ी मेहनत की गई है, तो आप ईवेंट का उपयोग कर सकते हैं। $ टाइमआउट एक अच्छा समाधान नहीं है

आप (Bootstrap3) कर सकते हैं:

 $("#" + modalId).on("shown.bs.modal", function() { angular.element("[name='name']").focus(); }); 

ModalInstance पर आप कैसे खुले modal के बाद कोड निष्पादित करने के लिए पुस्तकालय में देख सकते हैं।

इस तरह $ टाइमआउट का उपयोग न करें, $ टाइमआउट 0, 1, 10, 30, 50, 200 या अधिक हो सकता है, यह क्लाइंट कंप्यूटर पर निर्भर करेगा, और मोडल को खोलने की प्रक्रिया

$ टाइमआउट का उपयोग न करें, जब आप फ़ोकस कर सकते हैं, तो विधि आपको बताएं;)

मुझे उम्मीद है कि यह मदद! 🙂

पिछले सभी उत्तर काम नहीं करता यदि वांछित फ़ोकस तत्व डायरेक्टिव टेम्प्लेट में इंजेक्शन होता है। निम्नलिखित निदेशात्मक तत्व साधारण तत्व या निर्देश इंजेक्शन तत्व दोनों के लिए फिट होते हैं (मैं इसे टाइपस्क्रिप्ट में लिखा था) यह आंतरिक ध्यान देने योग्य तत्व के लिए चयनकर्ता को स्वीकार करता है अगर आपको सिर्फ आत्म तत्व पर ध्यान देने की आवश्यकता है – निर्देश के लिए कोई भी चयनकर्ता पैरामीटर न भेजें:

 module APP.Directives { export class FocusOnLoadDirective implements ng.IDirective { priority = 0; restrict = 'A'; constructor(private $interval:any, private $timeout:any) { } link = (scope:ng.IScope, element:JQuery, attrs:any) => { var _self = this; var intervalId:number = 0; var clearInterval = function () { if (intervalId != 0) { _self.$interval.cancel(intervalId); intervalId = 0; } }; _self.$timeout(function(){ intervalId = _self.$interval(function () { let focusableElement = null; if (attrs.focusOnLoad != '') { focusableElement = element.find(attrs.focusOnLoad); } else { focusableElement = element; } console.debug('focusOnLoad directive: trying to focus'); focusableElement.focus(); if (document.activeElement === focusableElement[0]) { clearInterval(); } }, 100); scope.$on('$destroy', function () { // Make sure that the interval is destroyed too clearInterval(); }); }); }; public static factory = ():ng.IDirectiveFactory => { let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout); directive.$inject = ['$interval', '$timeout']; return directive; }; } angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory()); 

}

साधारण तत्व के लिए उपयोग उदाहरण:

 <button tabindex="0" focus-on-load /> 

आंतरिक तत्व के लिए उपयोग उदाहरण (आमतौर पर टेम्पलेट के साथ डायरेक्टिव जैसे गतिशील इंजेक्शन तत्व के लिए):

 <my-directive focus-on-load="input" /> 

आप "इनपुट" के बजाय किसी भी jQuery चयनकर्ता का उपयोग कर सकते हैं

ngModelController का उपयोग करना संभव है 1.6+ के साथ कार्य करना (पुराने संस्करणों के साथ नहीं पता)

एचटीएमएल

 <form name="myForm"> <input type="text" name="myText" ng-model="myText"> </form> 

जे एस

 $scope.myForm.myText.$$element.focus(); 

NB: संदर्भ के आधार पर, आपको शायद एक टाइमआउट फ़ंक्शन में लपेट करना होगा।

एनबी²: controllerAs ए एस का उपयोग करते समय, यह लगभग समान है name="vm.myForm" name="myForm" साथ name="myForm" को name="vm.myForm" और जेएस में, vm.myForm.myText.$$element.focus();

मैं बेहतर समाधान के लिए खोज करने और इसे नहीं ढूंढने के बाद इस चर्चा में योगदान करना चाहता हूं, इसके बदले इसे बनाने के बजाय

मापदंड: 1. पुन: प्रयोज्यता बढ़ाने के लिए समाधान को मूल नियंत्रक क्षेत्र से स्वतंत्र होना चाहिए। 2. किसी शर्त को मॉनिटर करने के लिए $ वॉच के उपयोग से बचें, यह दोनों धीमा है, डायजेस्ट लूप के आकार को बढ़ाता है और कठिन परीक्षण करता है। 3. $ टाइमआउट या $ दायरे से बचें। $ डायजेस्ट लूप ट्रिगर करने के लिए () लागू होते हैं 4. एक इनपुट तत्व उस तत्व के भीतर मौजूद होता है जहां डायरेक्टिव का उपयोग खुला होता है।

यह मैं सबसे अधिक पसंद किया समाधान है:

निर्देशक:

 .directive('focusInput', [ function () { return { scope: {}, restrict: 'A', compile: function(elem, attr) { elem.bind('click', function() { elem.find('input').focus(); }); } }; }]); 

एचटीएमएल:

  <div focus-input> <input/> </div> 

मुझे आशा है कि इससे किसी की मदद मिलेगी!

शायद, ईएस 6 उम्र पर सबसे सरल समाधान।

निम्नलिखित एक लाइनर डायरेक्टिव को जोड़ना HTML 'autofocus' विशेषता Angular.js पर प्रभावी बनाता है

 .directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())})) 

अब, आप केवल HTML5 ऑटोफोकस सिंटैक्स का उपयोग कर सकते हैं जैसे:

 <input type="text" autofocus> 

यह आसान है .. यह कोशिश करो

एचटीएमएल

 <select id="ddl00"> <option>"test 01"</option> </select> 

जावास्क्रिप्ट

 document.getElementById("ddl00").focus(); 

मुझे लगता है कि निर्देश अनावश्यक है आवश्यक तत्व का चयन करने के लिए HTML आईडी और कक्षा विशेषताओं का उपयोग करें और फ़ोकस (या jQuery के समतुल्य) को लागू करने के लिए सेवा का उपयोग दस्तावेज़ .getElementById या document.query सिलेक्ट्रर करें।

मार्कअप मानक एचटीएमएल / कोलेर डायरेक्टिव्स जो चयन के लिए आईडी / कक्षाओं के साथ हैं

 <input id="myInput" type="text" ng-model="myInputModel" /> 

नियंत्रक प्रसारण घटना

 $scope.$emit('ui:focus', '#myInput'); 

यूआई सर्विस में क्वेरी सेलेक्टर का उपयोग होता है – अगर कई मैचों (क्लास के कारण बताएं) हैं तो यह केवल पहले ही लौटाएगा

 $rootScope.$on('ui:focus', function($event, selector){ var elem = document.querySelector(selector); if (elem) { elem.focus(); } }); 

डायजेस्ट चक्र को लागू करने के लिए आप $ टाइमआउट () का उपयोग करना चाह सकते हैं

बस कुछ कॉफी में फेंक

 app.directive 'ngAltFocus', -> restrict: 'A' scope: ngAltFocus: '=' link: (scope, el, attrs) -> scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv 

Not sure if relying on the timeout is a good idea, but this works for ng-repeat because this code runs AFTER angularjs updates the DOM, so you make sure all objects are there:

 myApp.directive('onLastRepeat', [function () { return function (scope, element, attrs) { if (scope.$last) setTimeout(function () { scope.$emit('onRepeatLast', element, attrs); }, 1); }; }]); //controller for grid myApp.controller('SimpleController', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http) { var newItemRemoved = false; var requiredAlert = false; //this event fires up when angular updates the dom for the last item //it's observed, so here, we stop the progress bar $scope.$on('onRepeatLast', function (scope, element, attrs) { //$scope.complete(); console.log('done done!'); $("#txtFirstName").focus(); }); }]);