通过没有模板的角度指令进行字符串操作

汤姆

我正在尝试获取纯文本推文的列表(例如,“ @ Stackoverflow很酷#hashtag”),将其传递给ng-repeat,然后应用自定义指令(或过滤器)将字符串更改为类似“ @Stackoverflow is很酷的#hashtag

因此,我尝试了一个过滤器,它工作得很好,除了它不能与原始html很好地配合,而且我已经读到,无论如何,这是指令的工作。

因此,过滤器(称为:){{ tweet | parseTweetTags }}

(function (app) {

    app.filter("parseTweetTags", function () {
        return function (text) {
            return text.parseUrl().parseUsername().parseHashtag()
        }
    });

}(angular.module('twitterApp')));

现在,我想我想改成一个指令,然后从内部调用它<div parse-tweet-tags="tweet.text"></div>(甚至没有="tweet.text"-我不确定最佳实践是什么)ng-repeat

这就是我要解决的问题,但我认为还差得很远:

(function (app) {
    app.directive('parseTweetTags', function () {
        function link(scope, element, attrs) {
            var tweet;
            function parseTweet() {
                element.text(tweet.parseURL().parseUsername().parseHashtag());
            }

            scope.$watch(attrs.tweet, function (value) {
                tweet = value;
            });
        }

        return {
            link: link
        }
    });
}(angular.module('twitterApp')));

HTML希望看起来像这样,没有 ng-model

<div ng-controller="tweetsController">
    <div ng-repeat="tweet in tweets">
        <div parse-tweet-tags="tweet.text"></div>
    </div>
</div>

tl; dr

我如何简单地传递字符串,在指令中对其进行简单的操作,然后在没有模板的情况下将其返回

汤姆

在对过滤器及其与HTML绑定的方式进行了少许修改之后,我就能够做到这一点。

首先,更改过滤器,以传入$ sce并调用$ sce.trustAsHtml()

(function (app) {
    app.filter("parseTweetTags", function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text.parseURL().parseUsername().parseHashtag());
        }
    });
}(angular.module('twitterApp')));

并更改为html:

<div ng-controller="tweetsController">
    <div ng-repeat="tweet in tweets">
        <div ng-bind-html="tweet.text | parseTweetTags"></div>
    </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档