- Khi một Modal được mở, hãy đặt tiêu điểm vào <input> được xác định trước bên trong Modal này.
Xác định một lệnh và yêu cầu $ xem thuộc tính / kích hoạt để nó biết khi nào cần tập trung phần tử:
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
Thời gian chờ $ dường như là cần thiết để cung cấp thời gian phương thức để kết xuất.
'2.' Mỗi khi <input> hiển thị (ví dụ: bằng cách nhấp vào nút nào đó), hãy đặt tiêu điểm vào nó.
Tạo một chỉ thị về cơ bản giống như ở trên. Xem một số thuộc tính phạm vi và khi nó trở thành đúng (đặt nó trong trình xử lý ng-click của bạn), hãy thực thi element[0].focus(). Tùy thuộc vào trường hợp sử dụng của bạn, bạn có thể hoặc không cần thời gian chờ $ cho việc này:
<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
Cập nhật 7/2013 : Tôi đã thấy một vài người sử dụng các chỉ thị phạm vi cô lập ban đầu của tôi và sau đó gặp sự cố với các trường đầu vào được nhúng (nghĩa là một trường đầu vào trong phương thức). Một chỉ thị không có phạm vi mới (hoặc có thể là phạm vi con mới) sẽ làm giảm bớt một số nỗi đau. Vì vậy, ở trên tôi đã cập nhật câu trả lời để không sử dụng phạm vi cô lập. Dưới đây là câu trả lời ban đầu:
Câu trả lời gốc cho 1., sử dụng phạm vi cô lập:
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 .
Câu trả lời gốc cho 2., sử dụng phạm vi cô lập:
<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 .
Vì chúng ta cần đặt lại thuộc tính trigger / FocusInput trong lệnh, '=' được sử dụng cho cơ sở dữ liệu hai chiều. Trong chỉ thị đầu tiên, '@' là đủ. Cũng lưu ý rằng khi sử dụng '@', chúng tôi so sánh giá trị kích hoạt với "true" vì @ luôn dẫn đến một chuỗi.