我们的应用程序正在通过 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。另外,我需要应用这个新指令的字段已经有一个带有隔离范围的指令,所以我假设我不能有另一个带有隔离范围的指令 - 如果是这样,我可以在没有隔离范围的情况下实现它吗?
最佳答案
实现此目的的一个好方法是使用 ng-model
的解析器和格式化程序功能。 。许多人使用 ng-model
作为隔离范围的绑定(bind),但实际上它是一个非常强大的指令,似乎缺乏正确位置的文档来指导人们如何充分利用它的潜力.
您在这里所需要做的就是要求
controller来自指令中的 ng-model
。然后,您可以插入一个将“http://”添加到 View 的格式化程序,以及一个在需要时将其插入模型的解析器。所有绑定(bind)工作以及与输入的接口(interface)都是由 ng-model
完成的。
除非我能找到一个关于此的好博客(非常愿意接受任何发现它们的人的评论),更新的 fiddle 可能是描述这一点的最佳方式,这种支持使用 ' 手动输入 URL http' 或 'https',以及自动前缀(如果没有):http://jsfiddle.net/jrz7nxjg/
这也解决了您的第二个问题,即无法在一个元素上拥有两个独立的范围,因为您不再需要绑定(bind)到任何东西。
关于AngularJS - 将 http 前缀添加到 url 输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19482000/