AngularJS - URL 입력 필드에 http 접두사 추가

AngularJS - URL 입력 필드에 http 접두사 추가

우리 앱은 jQuery에서 Angular로 포팅되고 있습니다.부트스트랩(각-의 부트스트랩)이 있는 JS.

다음 우수 게시물에서 다룬 편리한 기능 중 하나는 접두사가 아직 없는 경우 URL 필드에 " http://" 접두사를 추가하는 것이었습니다. http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/

나는 Angular에서 같은 것을 이루려고 노력하고 있습니다.지시문을 통해 JS가 입력되고 있는 ng-model의 값을 변경하는 지시문을 얻을 수 없습니다.

지금은 모든 변경 사항에 "http://" 접두사를 추가하기 위해 피들을 시도하는 것으로 간단히 시작했습니다(나중에 논리를 추가하여 필요할 때만 추가할 수 있습니다).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;
                });
            });
        }
    };
});

누가 이것을 ngModel에 다시 쓸 수 있도록 도와줄 수 있습니까?또한 이 새 지침을 적용해야 하는 분야에는 격리 범위가 있는 지침이 이미 있으므로 격리 범위가 있는 다른 지침을 가질 수 없다고 가정합니다. 만약 그렇다면 격리 범위 없이 달성할 수 있습니까?

이를 위한 좋은 방법은 의 파서 및 포맷 기능을 사용하는 것입니다. 많은 사람들이 다음을 사용합니다.ng-model그것은 단지 고립된 범위에 대한 구속력이지만, 실제로 그것은 사람들에게 그것의 잠재력을 최대한 사용하는 방법에 대해 안내할 수 있는 적절한 장소에 문서가 부족한 것처럼 보이는 꽤 강력한 지침입니다.

여기서 당신이 해야할 일은require에서의 지배자ng-model당신의 지시에그러면 뷰에 'http://'를 추가하는 포맷과 필요할 때 모델에 밀어 넣는 파서를 입력할 수 있습니다.모든 바인딩 작업과 입력과의 인터페이싱은 다음과 같이 수행됩니다.ng-model.

이에 대한 좋은 블로그를 찾을 수 없는 한(찾는 모든 사람의 의견에 매우 개방적인) 업데이트된 fiddle이 이를 설명하는 가장 좋은 방법일 것입니다. URL에 대한 지원은 'https' 또는 'http'로 수동으로 입력할 수 있을 뿐만 아니라 다음 중 하나도 없는 경우 자동 prefix링이 가능합니다. http://jsfiddle.net/jrz7nxjg/

이를 통해 더 이상 어떤 것에도 결합할 필요가 없기 때문에 한 요소에 두 개의 고립된 스코프를 가질 수 없는 두 번째 문제도 해결할 수 있습니다.

Matt Byrne이 제공한 이전 코멘트는 https 접두사에 적용되지 않습니다.**https 접두사에서도 작동하는 이전 답변을 바탕으로 업데이트된 버전을 확인해보세요!이것은 거기에 없었습니다.

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

http://jsfiddle.net/ZaeMS/13

언급URL : https://stackoverflow.com/questions/19482000/angularjs-add-http-prefix-to-url-input-field