Question

这里我有一个简单的html元素，我试图使用ng-bind-html绑定到Html。

但这似乎不起作用：

.controller('foo', function($scope) {
    $scope.bar = "<h1>this is bar</h1>";
    $scope.bar1 = "<h1> <a ng-href='www.google.com'> this is bar </a></h1>";
});

<div ng-controller="foo">

    <div ng-bind-html="bar1"></div>

</div>

如果我使用普通的href，它可以正常工作。任何人都可以解释为什么ng-href不能在这种情况下工作或让我知道如何使这项工作。

Answer 1

试试这个。因为您在模板中使用了ng，所以您应该对其进行评估或将其删除。

 $scope.bar1 = "<h1> <a href='www.google.com'> this is bar </a></h1>";

Demo

Answer 2

使用trustAsHtml来评估安全内容。还使用href

的ng-href内容

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope,$sce){
$scope.bar = "<h1>this is bar</h1>";
    $scope.bar1 = "<h1> <a href='www.google.com'> this is bar </a></h1>";
    
    $scope.bar1 = $sce.trustAsHtml($scope.bar1)

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-bind-html="bar1"></div>
</div>

＆＃13;

Answer 3

只需使用href 喜欢

  $scope.bar1 = "<h1> <a href=\"http://www.google.com\"> this is bar </a></h1>";

See Here

ng-href无法使用ng-bind-html

3 个答案: