AngularJS指令替换文本

Question

我将如何在angularjs中创建一个指令，例如采用以下元素：

<div>Example text http://example.com</div>

并将其转换为此

<div>Example text <a href="http://example.com">http://example.com</a></div>

我已经编写了用于自动链接函数中的文本并返回html的功能（让我们将函数称为“ autoLink”），但是我对指令不满意。

我还想向元素添加属性，以将对象传递给指令。例如

<div linkprops="link.props" >Example text http://example.com</div>

其中link.props是{a：’bla bla’，b：’waa waa’}之类的对象，该对象将作为第二个参数传递给autoLink函数（第一个是文本）。

Answer 1

有两种方法：

指示

app.directive('parseUrl', function () {
    var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/gi;
    return {
        restrict: 'A',
        require: 'ngModel',
        replace: true,
        scope: {
            props: '=parseUrl',
            ngModel: '=ngModel'
        },
        link: function compile(scope, element, attrs, controller) {
            scope.$watch('ngModel', function (value) {
                var html = value.replace(urlPattern, '<a target="' + scope.props.target + '" href="$&">$&</a>') + " | " + scope.props.otherProp;
                element.html(html);
            });
        }
    };
});

HTML：

<p parse-url="props" ng-model="text"></p>

过滤

app.filter('parseUrlFilter', function () {
    var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/gi;
    return function (text, target, otherProp) {
        return text.replace(urlPattern, '<a target="' + target + '" href="$&">$&</a>') + " | " + otherProp;
    };
});

HTML：

<p ng-bind-html-unsafe="text | parseUrlFilter:'_blank':'otherProperty'"></p>

注意：'otherProperty'举例来说，如果您要将更多属性传递到过滤器中，则为。

jsFiddle

更新： 改进的替换算法。