替换AngularJS中的空格

Question

我正在开发一种将 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) ? '&amp;utm_medium=' + data.medium : ''}}{{(data.campaignTerm) ? '&amp;utm_term=' + data.campaignTerm : ''}}{{(data.campaignContent) ? '&amp;utm_content=' + data.campaignContent : ''}}{{(data.campaignName) ? '&amp;utm_name=' + data.campaignName : ''}}</textarea>
</div>

Answer 1

您可以定义自己的指令 我写了类似的东西，这里是指令的链接函数

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;

                }
}

我还没有测试过关于替换的部分。如果您将指令命名为 spaceReplacedText

html会变成

<input type ="text" spaceReplacedText="$variable">

更多关于指令的阅读

http://docs.angularjs.org/api/ng.$compile