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

问题描述：

我们的应用程序正在通过bootstrap（angular-ui bootstrap）从jQuery移植到AngularJS。AngularJS - 为url输入字段添加http前缀

这是涵盖以下优良后一个方便的功能是添加的“http：//”前缀的URL字段，如果它没有已经有一个前缀：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。此外，我需要应用这个新指令的领域已经有一个指令与隔离范围，所以我假设我不能有隔离范围的另一个 - 如果这是我可以实现它没有隔离范围？

答

一个好方法是使用ng-model的解析器和格式化功能。许多人使用ng-model作为对孤立范围的约束，但实际上这是一个非常强大的指令，似乎缺乏正确的地方文档来指导人们如何充分利用它的潜力。

所有你需要做的是在你的指令中对requirecontroller从ng-model。然后，您可以推入一个格式器，该格式器将'http：//'添加到视图中，并在需要时将解析器推入模型中。所有绑定工作和输入接口都由ng-model完成。

除非我能找到一个好的博客（非常欢迎任何发现他们的人发表评论），更新的小提琴可能是描述这一点的最佳方式，这种支持手动输入的网址是'http“或” HTTPS”，以及自动前缀，如果没有他们的：http://jsfiddle.net/jrz7nxjg/

这也解决了你不能够有一个元素的两个隔离示波器的第二个问题，因为你不再需要绑定任何东西。

哇 - 我甚至没有想到走这条路。这完全合适，谢谢。我很高兴现在我发布了这个问题！ –

如果我将字段设置为'type =“text”'，那么我只能得到这个工作。这对字段中的type =“url”'不起作用，因为该值在它有一个前缀之前是无效的，因此该值不会与作用域绑定。有没有办法让这两个人一起玩？ http://jsfiddle.net/m4vnf/ –

您可以使用'splice'将解析器推到前面。这似乎是有效的，因为模型还没有被验证者杀死。 http://jsfiddle.net/ZaeMS/2/ – Andyrooger

答

Matt Byrne提供的上一条评论不适用于前缀https前缀。根据以前的答案检出更新后的版本，该版本与** https前缀一起使用！这是缺少有

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

http://jsfiddle.net/ZaeMS/13

感谢这 – MURATSPLAT

不工作...当我开始写“https”给我：http：// https – azuax

条件需要是： if（value &&！/ ^（https？）：\/\ // i.test（value）&&（'http：//'.indexOf（value）=== -1 &&'https：//'.indexOf （值）=== -1））{ – azuax

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

相关推荐