AngularJS - 添加http preFIX给url输入字段 [英] AngularJS - add http prefix to url input field
问题描述
我们的应用正在从jQuery的移植与引导（角UI引导）AngularJS。
Our app is being ported from jQuery to AngularJS with bootstrap (angular-ui bootstrap).
这是涵盖以下优良发布一个方便的功能是添加的http：//preFIX到一个URL字段，如果它不已经有一个preFIX：<一href=\"http://www.robsearles.com/2010/05/jquery-validate-url-adding-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-模式的价值，因为它是被打出来。
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：//上的每一个变化，现在preFIX（以后我可以添加逻辑来仅在需要时添加）。 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-模型 。许多人使用使用 NG-模型的只是孤立的范围有约束力的，但实际上它似乎在正确的地方，引导人们缺乏文档一个pretty强大的指令如何用它来充分发挥其潜力。
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.
所有你需要做的，是为要求中的控制器> NG-模型。然后，你可以在一个格式化推动，增加了的http：// 的'的观点，并在需要时将其推到模型的分析器。所有的绑定工作，并与输入接口由 NG-模型做。
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.
除非我能找到一个很好的博客（非常开放给任何人谁发现他们的意见），更新的小提琴大概是形容它的最好方法，对于要使用手动输入网址这种支持的 HTTP 的'或'的 HTTPS 的'，以及自动prefixing如果没有他们的： 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 preFIX给url输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
