AngularJS - 将 http 前缀添加到 url 输入字段 [英] AngularJS - add http prefix to url input field
问题描述
我们的应用程序正在通过引导程序(angular-ui bootstrap)从 jQuery 移植到 AngularJS.
Our app is being ported from jQuery to AngularJS with bootstrap (angular-ui bootstrap).
以下优秀文章介绍的一个方便的功能是在 URL 字段中添加http://"前缀(如果它还没有前缀):http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/
One handy feature that was covered by the following excellent post was to add "http://" prefix to a URL field if it did not already have a prefix: http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/
我试图通过指令在 AngularJS 中实现相同的目标，但无法获得指令以在输入时更改 ng-model 的值.
I am trying to achieve the same in AngularJS via a directive, but cannot get the directive to alter the value of the ng-model as it is being typed.
我已经开始很简单，我尝试让小提琴在每次更改时添加http://"前缀(我可以稍后添加逻辑以仅在需要时添加它).http://jsfiddle.net/LDeXb/9/
I've started simple by trying to get a fiddle to add a "http://" prefix on EVERY change for now (I can add the logic later to only add it when needed). 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.此外，我需要应用这个新指令的领域已经有一个带有隔离范围的指令，所以我假设我不能有另一个具有隔离范围的指令 - 如果是这样，我可以在没有隔离范围的情况下实现它吗?
Can anyone please help me to get this to write back to the ngModel. Also, the field I need to apply this new directive to already has a directive on it with isolate scope so I'm assuming I can't have another one with isolate scope - if this is so can I achieve it without isolate scope?
推荐答案
一个很好的方法是使用 ng-model.许多人使用 ng-model 作为对隔离范围的绑定，但实际上它是一个非常强大的指令，似乎在正确的地方缺乏文档来指导人们如何充分利用它.
A good way to do this is by using the parsers and formatters functionality of ng-model. Many people use use ng-model as just a binding on isolated scope, but actually it's a pretty powerful directive that seems to lack documentation in the right places to guide people on how to use it to its full potential.
在这里你需要做的就是 require controller 来自指令中的 ng-model.然后，您可以推送一个格式化程序，将http://"添加到视图中，以及一个解析器，在需要时将其推送到模型中.所有绑定工作和与输入的接口都由 ng-model 完成.
All you need to do here is to require the controller from ng-model in your directive. Then you can push in a formatter that adds 'http://' to the view, and a parser that pushes it into the model when needed. All the binding work and interfacing with the input is done by ng-model.
除非我能找到一个很好的博客(对找到它们的人的评论非常开放)，更新的小提琴可能是描述这一点的最佳方式，这种支持使用手动输入 URL"http' 或 'https'，如果没有，则自动添加前缀:http://jsfiddle.net/jrz7nxjg/
Unless I can find a good blog on this (very much open to comments from anyone who finds them), an updated fiddle is probably the best way to describe this, this support for URL to be entered manually with 'http' or 'https', as well as auto-prefixing if none of them: http://jsfiddle.net/jrz7nxjg/
这也解决了您无法在一个元素上拥有两个独立作用域的第二个问题，因为您不再需要绑定到任何东西.
This also solves your second problem of not being able to have two isolated scopes on one element, as you no longer need to bind to anything.
这篇关于AngularJS - 将 http 前缀添加到 url 输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
