Question

我们的应用程序正在从jQuery移植到AngularJS并带有bootstrap（angular-ui bootstrap）。

以下优秀帖子涵盖的一个方便功能是，如果URL字段还没有前缀，请添加“http：//”前缀：http://www.robsearles.com/2010/05/jquery-validate-url-adding-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。此外，我需要应用这个新指令的字段已经有一个带有隔离范围的指令，所以我假设我不能再使用隔离范围 - 如果是这样我可以在没有隔离范围的情况下实现吗？ / p>

Answer 1

执行此操作的一种好方法是使用ng-model的解析器和格式化程序功能。许多人使用ng-model作为对孤立范围的绑定，但实际上它是一个非常强大的指令，似乎缺少适当的地方的文档来指导人们如何充分利用它。

您需要在此处执行的操作是require指令ng-model中的controller。然后，您可以插入一个格式化程序，将“ http：// ”添加到视图中，并在需要时将其推送到模型中。所有绑定工作和与输入的接口都由ng-model完成。

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

这也解决了第二个问题，即无法在一个元素上放置两个独立的范围，因为您不再需要绑定任何内容。

Answer 2

Matt Byrne提供的上一条评论不适用于 https 前缀。根据之前使用** https前缀的答案检查更新版本！那里缺少

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

http://jsfiddle.net/ZaeMS/13

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

2 个答案: