AngularJS將文本解析爲引導表中的HTML

我想在引導表中顯示一些文本。該文本應該被解析爲HTML，因爲我需要<br/> -tag顯示所有不同的鏈接。用我的代碼參見this Plunker。
正如你所看到的，我使用了默認的ng-bind指令以及不推薦使用的ng-bind-html，但是文本顯示爲純文本或者根本不顯示。
你們可以告訴我如何顯示解析爲HTML的文本？AngularJS將文本解析爲引導表中的HTML

這裏是我的HTML表格代碼：

<table class="table"> 
    <thead> 
    <tr> 
     <th>Method</th> 
     <th>$scope.other</th> 
     <th>$scope.links</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>ng-bind</td> 
     <td>{{other}}</td> 
     <td>{{links}}</td> 
    </tr> 
    <tr> 
     <td>ng-bind-html</td> 
     <td ng-bind-html="other"></td> 
     <td ng-bind-html="links"></td> 
    </tr> 
    </tbody> 
</table>

匹配控制器：

app.controller('TestController', function($scope){ 
    $scope.links = 'https://www.google.com <br/> https://angularjs.org/ <br/> \ 
        https://www.google.com <br/> https://angularjs.org/ <br/> \ 
        https://www.google.com <br/> https://angularjs.org/ <br/>'; 

    $scope.other = "sample Text"; 
});

來源

2016-08-11 JohnDizzle

HTML注入模板是不是默認的安全，你必須將其標記爲受信任的。

app.controller('TestController', function($scope, $sce){ 
    $scope.links = $sce.trustAsHtml('https://www.google.com <br/> https://angularjs.org/ <br/> \ 
       https://www.google.com <br/> https://angularjs.org/ <br/> \ 
       https://www.google.com <br/> https://angularjs.org/ <br/>'); 

    $scope.other = "sample Text"; 
});

你有什麼需要直接注入HTML理由嗎？你可以有一個地圖/鏈接列表，並使用ng-repeat在你的模板中渲染它們。

來源

2016-08-11 08:06:11 kudlajz

我試圖將所有的數據到一個數組映射但我不知道如何顯示它。我必須測試要顯示的數據是簡單字符串還是數組 – JohnDizzle

@JohnDizzle [像這樣]（https://plnkr.co/edit/3ZTN8P3yOfjVpYU46Jdk?p=preview）例如？或者你可以有一個數組數組，並簡單地添加另一個嵌套的ng-repeat。 – kudlajz

這個想法看起來不錯，但我的數據是在一個單獨的對象中，包含字符串和數組，所以我必須首先確定下一個屬性是哪種數據類型。我需要一種方法來確定我的HTML模板中的數據類型 – JohnDizzle

ü需要使用消毒模塊：https://docs.angularjs.org/api/ngSanitize/service/ $消毒

app.controller('TestController', function($scope, $sce){ 
    $scope.links = $sce.trustAsHtml('https://www.google.com <br/> https://angularjs.org/ <br/> \ 
       https://www.google.com <br/> https://angularjs.org/ <br/> \ 
       https://www.google.com <br/> https://angularjs.org/ <br/>'); 

    $scope.other = "sample Text"; 
});

來源

2016-08-11 08:09:06 saike

您可以使用ng-bind-html和ng-bind-html-unsafe的那種目的。

的實例示here

來源

2016-08-11 08:57:26 Rohit

AngularJS將文本解析爲引導表中的HTML

回答

相關問題