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

Question

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

以下优秀帖子中介绍的一个方便的功能是在 URL 字段中添加“http://”前缀(如果它还没有前缀):http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/

我试图通过指令在 AngularJS 中实现相同的目标，但无法获取指令来更改正在键入的 ng-model 的值。

我从简单开始，尝试使用 fiddle 在每个更改上添加“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 作为隔离范围的绑定(bind)，但实际上它是一个非常强大的指令，似乎缺乏正确位置的文档来指导人们如何充分利用它的潜力.

您在这里所需要做的就是要求 controller来自指令中的 ng-model 。然后，您可以插入一个将“http://”添加到 View 的格式化程序，以及一个在需要时将其插入模型的解析器。所有绑定(bind)工作以及与输入的接口(interface)都是由 ng-model 完成的。

除非我能找到一个关于此的好博客(非常愿意接受任何发现它们的人的评论)，更新的 fiddle 可能是描述这一点的最佳方式，这种支持使用 ' 手动输入 URL http' 或 'https'，以及自动前缀(如果没有):http://jsfiddle.net/jrz7nxjg/

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