- Saat Modal dibuka, setel fokus pada <input> yang telah ditentukan di dalam Modal ini.
Tetapkan arahan dan minta $ tonton properti / pemicu sehingga tahu kapan harus memfokuskan elemen:
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
$ Timeout tampaknya diperlukan untuk memberikan modal waktu untuk merender.
'2.' Setiap kali <input> menjadi terlihat (misalnya dengan mengklik beberapa tombol), atur fokus padanya.
Buat arahan dasarnya seperti yang ada di atas. Tonton beberapa properti lingkup, dan ketika itu menjadi benar (atur di pawang ng-klik Anda), jalankan element[0].focus(). Bergantung pada kasus penggunaan Anda, Anda mungkin perlu atau tidak perlu $ timeout untuk yang ini:
<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
Pembaruan 7/2013 : Saya telah melihat beberapa orang menggunakan arahan lingkup isolat asli saya dan kemudian memiliki masalah dengan bidang input yang disematkan (yaitu, bidang input dalam modal). Arahan tanpa ruang lingkup baru (atau mungkin ruang lingkup anak baru) harus mengurangi rasa sakit. Jadi di atas saya memperbarui jawabannya untuk tidak menggunakan cakupan isolasi. Di bawah ini adalah jawaban asli:
Jawaban orisinal untuk 1., menggunakan ruang lingkup isolasi:
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 .
Jawaban orisinal untuk 2., menggunakan ruang lingkup isolasi:
<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 .
Karena kita perlu mereset properti trigger / focusInput dalam direktif, '=' digunakan untuk penyatuan data dua arah. Dalam arahan pertama, '@' sudah cukup. Perhatikan juga bahwa ketika menggunakan '@' kami membandingkan nilai pemicu ke "true" karena @ selalu menghasilkan string.