Ứng dụng của chúng tôi đang được chuyển từ jQuery sang AngularJS với bootstrap (angular-ui bootstrap).AngularJS - thêm tiền tố http vào trường nhập url
Một tính năng tiện dụng mà được bao phủ bởi những bài tuyệt vời sau đây là để thêm "http: //" tiền tố vào một trường URL nếu nó không đã có một tiền tố: http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/
tôi đang cố gắng để đạt được cùng trong AngularJS thông qua một chỉ thị, nhưng không thể có được chỉ thị để thay đổi giá trị của ng-model khi nó đang được đánh máy.
Tôi đã bắt đầu đơn giản bằng cách tìm cách thêm tiền tố "http: //" vào MỌI thay đổi ngay bây giờ (tôi có thể thêm logic sau để chỉ thêm khi cần). http://jsfiddle.net/LDeXb/9/
app.directive('httpPrefix', function() {
return {
restrict: 'E',
scope: {
ngModel: '='
},
link: function(scope, element, attrs, controller) {
element.bind('change', function() {
scope.$apply(function() {
scope.ngModel = 'http://' + scope.ngModel;
});
});
}
};
});
Bất cứ ai có thể vui lòng giúp tôi viết điều này cho ngModel. Ngoài ra, trường tôi cần phải áp dụng chỉ thị mới này để có một chỉ thị trên nó với phạm vi cô lập vì vậy tôi giả sử tôi không thể có một cái khác với phạm vi cô lập - nếu như vậy tôi có thể đạt được nó mà không có phạm vi cô lập?
Wow - Tôi thậm chí không nghĩ đến đi xuống con đường này. Điều này sẽ phù hợp hoàn hảo, cảm ơn. Tôi thực sự vui vì tôi đã đăng câu hỏi này ngay bây giờ! –
Tôi chỉ có thể làm việc này nếu tôi đặt trường thành 'type =" text "'. Điều này sẽ không hoạt động với 'type =" url "' trên trường vì giá trị không hợp lệ cho đến khi nó có tiền tố và do đó giá trị không bị ràng buộc phạm vi. Có cách nào để hai người chơi cùng nhau không? http://jsfiddle.net/m4vnf/ –
Bạn có thể sử dụng 'splice' để đẩy trình phân tích cú pháp của bạn lên phía trước. Điều này dường như hoạt động, vì mô hình này vẫn chưa bị người kiểm chứng hủy diệt. http://jsfiddle.net/ZaeMS/2/ – Andyrooger