AngularJS-在URL输入字段中添加http前缀

Question

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

以下出色的文章介绍的一个便捷功能是，如果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。另外，我需要将此新指令应用于在其上具有隔离范围的指令的字段，因此我假设我不能再有一个具有隔离范围的指令-
如果是这样，我可以在没有隔离范围的情况下实现它吗？

Answer 1

一个很好的方法是使用的解析器和格式化程序功能ng- model。许多人将使用ng- model仅用作隔离范围的绑定，但实际上这是一个非常强大的指令，似乎在正确的位置缺少文档来指导人们如何充分利用它。

您要做的就是从您的指令中require对控制器进行操作ng- model。然后，您可以推入将’ http：// ‘添加到视图的格式化程序，并在需要时将其推入模型的解析器。所有绑定工作和与输入的接口均由完成ng- model。

除非我能找到一个不错的博客（非常欢迎任何发现它的人发表评论），否则更新小提琴可能是描述此问题的最佳方法，这种对URL的支持可以通过’ http ‘或’
https ‘ 手动输入，以及自动前缀（如果没有一个）：http :
//jsfiddle.net/jrz7nxjg/

这也解决了您的第二个问题，即您不再需要绑定任何对象，因此无法在一个元素上拥有两个隔离的作用域。