javascript 替换 AngularJS 中的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21559592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replacing spaces in AngularJS
提问by CoreyRab
I am working on a tool that adds UTM parameters to URLs and I need to replace or remove the spaces in between words of the user inputs.
我正在开发一种将 UTM 参数添加到 URL 的工具，我需要替换或删除用户输入的单词之间的空格。
<div ng-app="myApp">
<div class="large-6 columns">
<label style="font-size:16px;">URL<small> required</small></label> <input type="text" ng-model="data.url" autofocus="" placeholder="URL of your website. ex. www.widgets.com/blue-widgets">
</div>
<div class="large-6 columns">
<label style="font-size:16px;">Source<small> required</small></label> <input type="text" ng-bind="?/utm=" ng-model="data.source" placeholder="URL they are sent from. ex. twitter.com, yelp.com, etc.">
</div>
<div class="large-6 columns">
<label style="font-size:16px;">Medium<small> required</small></label> <input type="text" ng-model="data.medium" placeholder="Type of content used. ex. banner_ad, newsletter, etc.">
</div>
<div class="large-6 columns">
<label style="font-size:16px;">Campaign Term</label> <input type="text" ng-model="data.campaignTerm" placeholder="For paid keywords">
</div>
<div class="large-6 columns">
<label style="font-size:16px;">Campaign Content</label> <input type="text" ng-model="data.campaignContent" placeholder="Terms used in marketing content. ex. Free vs. 20% off">
</div>
<div class="large-6 columns">
<label style="font-size:16px;">Campaign Name<small> required</small></label> <input type="text" ng-model="data.campaignName" placeholder="Name of the campaign. ex. End of summer promotion">
</div>
<h2 ng-show="data.url" style="text-align:center">
Your URL, sir
</h2>
<div ng-show="data.url" >
<textarea rows="1" ng-trim="true" style="font-size:24px; text-align:center;" class="panel" id="selectible">{{data.url}}{{(data.source) ? '?/utm_source=' + data.source : ''}}{{(data.medium) ? '&utm_medium=' + data.medium : ''}}{{(data.campaignTerm) ? '&utm_term=' + data.campaignTerm : ''}}{{(data.campaignContent) ? '&utm_content=' + data.campaignContent : ''}}{{(data.campaignName) ? '&utm_name=' + data.campaignName : ''}}</textarea>
</div>
回答by himangshuj
you can define your own directive I wrote something similar, here is the linkfunction for the directive
你可以定义你自己的指令我写了类似的东西，这是指令的链接函数
function (scope, element, attrs, sokratikDialogueCtrl) {
// Listen for change events to enable binding
element.on('blur keyup change', function () {
scope.$apply(read);
});
// Write data to the model
function read() {
var html = angular.element(element).children().html().replace("\s","");
scope[attrs.spaceReplacedText] = html;
}
}
I have not tested the part regarding replace. if you name your directive as spaceReplacedText
我还没有测试有关更换的部分。如果您将指令命名为 spaceReplacedText
html will become
html 会变成
<input type ="text" spaceReplacedText="$variable">
for more on directives read
有关指令的更多信息，请阅读
http://docs.angularjs.org/api/ng.$compile
http://docs.angularjs.org/api/ng.$compile
