AngularJS自动将文本变量中的链接转换为可点击链接

Question

I have the below HTML, to display all article in listAllArticle . The article description field can sometimes contains a link. Now I want to convert the link to an href that is clickable. An example of the description I love wwww.google.com , here the url should be converted to a <a> element with href to the link

           <table class="table table-bordered table-hover">
                <tr>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Content</th>


                </tr>
                <tr ng-repeat="article in listAllArticles" ng-class-even="'info'" ng-class-odd="'success'">
                    <td col-2>{{ article.title }}</td>
                    <td col-2><div ng-bind-html="article[description ] | linky"></div></td>
                    <td col-4>{{ article.content }}</td>

                </tr>

Attempt : I have followed this guide to use AngularJS linky . In the above, I have put <div ng-bind-html="article[url] | linky"></div> to be converted.

Also, in my js file, I have also included ngSantitize as below:

var app = angular.module('app', ['ngSanitize']);

Yet the result is not displayed (it shows empty). Could you help?

Answer 1

In your Html just change article[description] to article.description . And it will work the way you are expecting.

Final HTML Code will look like:

    <table class="table table-bordered table-hover">
     <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Content</th>
     </tr>
     <tr ng-repeat="article in listAllArticles" ng-class-even="'info'" ng-class-odd="'success'">
            <td col-2>{{ article.title }}</td>
            <td col-2><div ng-bind-html="article.description | linky"></div></td>
            <td col-4>{{ article.content }}</td>
     </tr>
</table>

This is the test data used:

$scope.listAllArticles = [
            {
                title:"",
                description:"I love www.google.com",
                content:""
            }
        ]