AngularJS - 将http前缀添加到url输入字段

Question

我们的应用程序正在使用bootstrap(angular-ui bootstrap)从jQuery移植到AngularJS.

以下优秀帖子涵盖的一个方便功能是在URL字段中添加"http://"前缀,如果它还没有前缀:http://www.robsearles.com/2010/05/jquery-验证-URL-加入-HTTP /

我试图通过一个指令在AngularJS中实现相同的功能,但是无法获得指令来改变输入的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.此外,我需要应用这个新指令的字段已经有一个带有隔离范围的指令,所以我假设我不能再使用隔离范围 - 如果是这样我可以在没有隔离范围的情况下实现吗？

Answer 1

一个好方法是使用解析器和格式化程序的功能ng-model.许多人将使用ng-model仅仅视为对孤立范围的约束,但实际上它是一个非常强大的指令,似乎缺少适当的地方的文档来指导人们如何充分利用它.

所有你需要做的,是要require在控制器从ng-model你的指令.然后,您可以插入一个格式化程序,将" http:// "添加到视图中,以及一个解析器,在需要时将其推送到模型中.所有绑定工作和与输入的接口都是通过ng-model.

除非我能找到一个好的博客(对发现它们的人的评论非常开放),更新的小提琴可能是描述这一点的最佳方式,这种对URL的支持可以通过' http '或' https ' 手动输入,以及如果没有自动加前缀:http://jsfiddle.net/jrz7nxjg/

这也解决了第二个问题,即无法在一个元素上有两个独立的范围,因为您不再需要绑定任何东西.

Answer 2

Matt Byrne先前提供的评论不适用于https前缀.根据之前使用**https前缀的答案检查更新版本!那里缺少了

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

http://jsfiddle.net/ZaeMS/13