22

我们的应用程序正在通过引导程序（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。另外，我需要应用这个新指令的字段已经有一个具有隔离范围的指令，所以我假设我不能有另一个具有隔离范围的指令 - 如果是这样，我可以在没有隔离范围的情况下实现它吗？

4

2 回答 2

39

做到这一点的一个好方法是使用ng-model. 许多人将 useng-model用作隔离范围的绑定，但实际上它是一个非常强大的指令，似乎在正确的地方缺乏文档来指导人们如何充分利用它。

您在这里需要做的就是从您的指令require到控制器。ng-model然后，您可以推入一个将“ http:// ”添加到视图的格式化程序，以及一个在需要时将其推入模型的解析器。所有的绑定工作和与输入的接口都是由ng-model.

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

这也解决了您的第二个问题，即一个元素上不能有两个独立的作用域，因为您不再需要绑定到任何东西。

于 2013-10-20T21:09:39.587 回答
8

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

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

http://jsfiddle.net/ZaeMS/13

于 2014-09-10T20:27:32.367 回答