Подтвердить что ты не робот

AngularJS - добавьте префикс http в поле ввода URL-адреса

Наше приложение переносится с jQuery на AngularJS с загрузкой (angular -ui bootstrap).

Одной из удобных функций, которая была охвачена следующим превосходным сообщением, было добавление префикса "http://" в поле URL, если у него еще не был префикс: http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/

Я пытаюсь добиться того же в AngularJS с помощью директивы, но не могу получить директиву, чтобы изменить значение ng-модели по мере ее ввода.

Я начал просто, пытаясь получить скрипку, чтобы добавить префикс "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. Кроме того, поле, в котором я должен применить эту новую директиву, уже имеет директиву с областью выделения, поэтому я предполагаю, что у меня не может быть другого с областью выделения - если это так, я могу достичь этого без выделения области?

4b9b3361

Ответ 1

Хороший способ сделать это - использовать функции парсеров и форматировщиков ng-model. Многие люди используют ng-model как просто привязку к изолированной области видимости, но на самом деле это довольно мощная директива, которая, как представляется, не содержит документации в правильных местах, чтобы направлять людей на то, как использовать ее в полном объеме.

Все, что вам нужно сделать, это require controller от ng-model в вашей директиве. Затем вы можете нажать форматировщик, который добавляет "http://" в представление, и парсер, который подталкивает его в модель при необходимости. Вся работа по связыванию и взаимодействие с вводом осуществляется с помощью ng-model.

Если я не могу найти хороший блог на этом (очень открытый для комментариев от любого, кто их найдет), обновленная скрипка, вероятно, лучший способ описать это, эта поддержка URL-адреса вводится вручную с помощью "http" или 'https', а также auto-prefixing, если ни один из них: http://jsfiddle.net/jrz7nxjg/

Это также решает вашу вторую проблему: не иметь двух изолированных областей для одного элемента, поскольку вам больше не нужно связываться ни с чем.

Ответ 2

Предыдущий комментарий, предоставленный Matt Byrne, не работает для префикса https. Ознакомьтесь с обновленной версией, основанной на предыдущих ответах, которая также работает с ** https-префиксом! Это отсутствовало там

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

http://jsfiddle.net/ZaeMS/13