2013-10-20 18 views
22

Ứ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?

Trả lời

38

Cách tốt nhất để làm điều này là sử dụng chức năng phân tích cú pháp và định dạng của ng-model. Nhiều người sử dụng ng-model chỉ là một ràng buộc trên phạm vi cô lập, nhưng thực sự nó là một chỉ thị khá mạnh mẽ mà dường như thiếu tài liệu ở đúng nơi để hướng dẫn mọi người về cách sử dụng nó đến tiềm năng đầy đủ của nó.

Tất cả những gì bạn cần làm ở đây là require số controller từ ng-model trong chỉ thị của bạn. Sau đó, bạn có thể đẩy một trình định dạng thêm 'http: //' vào chế độ xem và trình phân tích cú pháp đẩy nó vào mô hình khi cần. Tất cả các công việc ràng buộc và giao tiếp với đầu vào được thực hiện bởi ng-model.

Trừ khi tôi có thể tìm thấy một blog tốt về điều này (rất nhiều ý kiến ​​đóng góp từ bất kỳ ai tìm thấy chúng), một fiddle cập nhật có lẽ là cách tốt nhất để mô tả điều này, hỗ trợ này cho URL được nhập thủ công với 'http 'hoặc' https', cũng như tự động tiền tố nếu không ai trong số họ: http://jsfiddle.net/jrz7nxjg/

này cũng giải quyết vấn đề thứ hai của bạn không thể có hai phạm vi bị cô lập trên một yếu tố, như bạn không còn cần phải liên kết với bất kỳ thứ gì.

+0

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ờ! –

+0

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/ –

+5

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

8

Nhận xét trước đó do Matt Byrne cung cấp không hoạt động cho tiền tố https. Kiểm tra phiên bản cập nhật dựa trên các câu trả lời trước đây hoạt động với tiền tố ** https quá! này đã mất tích có

/^(https?):\/\//i 

http://jsfiddle.net/ZaeMS/13

+0

cảm ơn vì điều này – MURATSPLAT

+0

không hoạt động ... khi tôi bắt đầu viết "https" cho tôi: http: // https – azuax

+1

Điều kiện cần phải là: if (value &&!/^ (https?): \/\ // i.test (giá trị) && ('http: //'.indexOf (giá trị) === -1 &&' https: //'.indexOf (giá trị) === -1)) { – azuax

Các vấn đề liên quan