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

debugcn 发表于 Dev

汤姆

我正在尝试获取纯文本推文的列表（例如，“ @ 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] 删除。