AngularJS + JSON：如何渲染HTML

Question

（我知道這個問題被問了很多次，但我相信我的設置是不同的，因此需要一個新的問題有不同的情景要求）

有很多那裏的例子顯示瞭如何渲染HTML，但我似乎無法得到這個與任何例子。我想呈現HTML的{{aboutlongs[0].description}}（這有<br />標籤，我想呈現爲HTML）

這裏的JS：

App.controller('aboutLongCtrl', function ($scope, $http) { 
    $http.get('test_data/ar_org.json') 
     .then(function (res) { 
      $scope.aboutlongs = res.data.aboutlong; 
     }); 
}); 

的HTML：

<div class="background-white p20 reasons" ng-controller="aboutLongCtrl" > 
    <h6><b>About {{aboutlongs[0].name}}</b></h6> 
    <div class="reason-content" > 
     {{aboutlongs[0].description}} 
    </div> 
</div> 

任何人都可以指向正確的方向？

JSON文件：

"aboutlong": [{ 
     "name": "Women's March", 
     "description": "The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our communities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have come before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our communities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego." 
    }] 

帖子我已經試過：

• How to render a HTML tag from json value using angularJs

• Angular.js How to render a HTML tag from json file

• AngularJS : Insert HTML into view

Answer 1

如果你想呈現字符串到html我推薦使用$sce.trustAsHtml(html)。

可以在裏面ng-bind-html

<div class="reason-content" ng-bind-html="aboutlongs[0].description | trustHtml" ></div> 

演示

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
$scope.aboutlongs = [{ 
 
     "name": "Women's March", 
 
     "description": "The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our communities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have come before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our communities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego." 
 
    }] 
 
    
 

 
}) 
 

 
.filter('trustHtml',function($sce){ 
 
    return function(html){ 
 
    return $sce.trustAsHtml(html) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div class="background-white p20 reasons" > 
 
    <h6><b>About {{aboutlongs[0].name}}</b></h6> 
 
    <div class="reason-content" ng-bind-html="aboutlongs[0].description | trustHtml" > 
 
     
 
    </div> 
 
</div> 
 
</div>

創建這樣

.filter('trustHtml',function($sce){ 
    return function(html){ 
    return $sce.trustAsHtml(html) 
    } 
}) 

通話樣品過濾器這樣的過濾器

Answer 2

看一看這個真棒文章Angular Trust Filter

angular.module('myApp', []) 
 
    .controller('aboutLongCtrl', ['$scope', '$sce', function($scope, $sce) { 
 
     $scope.aboutlongs = [{ 
 
     "name": "Women's March", 
 
     "description": $sce.trustAsHtml("The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our communities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have come before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our communities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego.") 
 
    }]; 
 
    }]) 
 
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" class="background-white p20 reasons" ng-controller="aboutLongCtrl" > 
 
    <h6><b>About {{aboutlongs[0].name}}</b></h6> 
 
    <div class="reason-content" ng-bind-html="aboutlongs[0].description"> 
 
    </div> 
 
</div>