嵌套ng-repeat中的Angular ng-bind-html

Question

所以我在ng-repeat中有一个ng-repeat.内部ng-repeat引用"recipe.ingredients中的项目".问题是这些"项目"中的每一个都有特殊字符,除非我使用ng-bind-html,否则它们不会呈现.但是当我尝试使用ng-bind-html时,它不起作用.这是html:

这有效但不能正确显示特殊字符(成分测量的分数):

<div class="row" ng-repeat="recipe in recipes">
    <h1 class='title'> {{ recipe.title }} </h1>
    <div class="col-md-5">
        <div class="list-group">
            <div class="list-title">Ingredients</div>
            <p class="list-group-item" ng-repeat="item in recipe.ingredients">{{item}}</p>
        </div>
    </div>
</div>

我尝试使用ng-bind-html(这不起作用):

<div class="row" ng-repeat="recipe in recipes">
    <h1 class='title'> {{ recipe.title }} </h1>
    <div class="col-md-5">
        <div class="list-group">
            <div class="list-title">Ingredients</div>
            <p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="item"></p>
        </div>
    </div>
</div>

ng-repeat中"item"的示例:

       {
            id: 1,
            img: "images/beefThumbnail.jpg",
            title: "Potatoes Supreme",
            servings: "Servings: 8 - 10",
            ingredients: [
                "6 medium potatoes, peeled",
                "Salt",
                "½ cup butter or margarine, melted",
                "2 cups shredded Cheddar cheese",
                "⅓ cup chopped green onion",
                "1 pint sour cream",
                "¼ teaspoon pepper",
                "½ teaspoon salt"
            ],
            directions: [
                "Oven 350°",
                "Cook potatoes in boiling salted water until done",
                "The next day grate potatoes coarsely",
                "Mix with remaining ingredients",
                "Place in shallow 1.5 or 2 quart baking dish and bake about 35 minutes"
            ]
        },//end potatoesSupreme

Answer 1

使用$ sce,也不要忘记将它注入控制器

JS

$scope.trustAsHtml = $sce.trustAsHtml

然后在HTML中

<div class="row" ng-repeat="recipe in recipes">
    <h1 class='title'> {{ recipe.title }} </h1>
    <div class="col-md-5">
        <div class="list-group">
            <div class="list-title">Ingredients</div>
            <p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="trustAsHtml(item)"></p>
        </div>
    </div>
</div>