Question

href 'test <a href=\"http://www.google.com"\ target=\"_blank\">http://www.google.com</a>'未呈现。

如果我使用

  <td>test <a href="http://www.google.com" target="_blank\">http://www.google.com</a></td>

而不是：

<td>{{item.name}}</td＆GT;

然后呈现链接（http://jsfiddle.net/daSJ5/150/）。小提琴src：

   <div ng-app="test">

    <div ng-view></div>  

    <!-- CACHE FILE: list.html -->
    <script type="text/ng-template" id="list.html">
        <table class="table table-striped table-condensed">

            <tbody>
                <tr data-ng-repeat="item in items">
                        <td>{{item.name}}</td>
                </tr> 
            </tbody>
        </table>
    </script>

</div>
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0.min.js"></script>
<style>
angular.module('test', []).
config(function($routeProvider) {
    $routeProvider.
    when('/list', {
        controller: ListCtrl,
        templateUrl: 'list.html'
    }).
    otherwise({
        redirectTo: '/list'
    });
});

data = [
    {
     name: 'test <a href=\"http://www.google.com"\ target=\"_blank\">http://www.google.com</a>'
    }
];


function ListCtrl($scope, $location) {
    $scope.items = data;

    $scope.goto_detail = function(id) {
        $location.url('/detail/' + id);
    };
}

function DetailCtrl($scope, $location, $routeParams) {
    $scope.item = data[$routeParams.id];

    $scope.goto_list = function() {
        $location.url('/list');
    };
}

如何使用<td>{{item.name}}</td>正确呈现href？

Answer 1

{{item.name}}无法呈现html，您需要使用ngSanitize模块中的ng-bind-html：

<td>
    <div ng-bind-html="item.name" >
    </div>
</td>

这里有更新的jsfiddle：http://jsfiddle.net/4pf0npf0/

Answer 2

使用while IFS=':/ ' read d m y h m _; do echo "$d $m $y $h $m"; done < data.txt

与AngularJS一起使用时，不会呈现href

2 个答案: