Angular.js如何从json文件呈现HTML标记

I am trying to parse html value in my angular page, not sure what I am doing wrong, I am getting this error in my console:

我试图在我的角度页面中解析html值，不知道我做错了什么，我在我的控制台中收到此错误：

app.js:13 Uncaught SyntaxError: Unexpected token )

app.js：13 Uncaught SyntaxError：意外的令牌）

app.js

app.js

var App = angular.module('App', []);

App.controller('ProjectCtrl', function($scope, $http) {
  $http.get('app/test.json')
       .then(function(res){
          $scope.projects = res.data;
        });

       App.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
});

test.json

test.json

[
  { "icon": "<i class="fa fa-github fa-3x" aria-hidden="true"></i>", "name": "lovelycss" },
  { "icon": "<i class="fa fa-github fa-3x" aria-hidden="true"></i>", "name": "lovely-icons" }
]

html:

HTML：

<div ng-controller="ProjectCtrl">
  <ul>
    <li ng-repeat="project in projects">
     <div ng-bind-html="'{{project.icon}}' | to_trusted"></div>- <em>{{project.name}}</em>
    </li>
  </ul>
</div>

what I am trying to archive is this: http://jsfiddle.net/JfGVE/1547/

我想要存档的是：http：//jsfiddle.net/JfGVE/1547/

I want a json loading the icons and the text.

我想要一个json加载图标和文本。

I hope now this will be clear.

我希望现在这一点很清楚。

2 个解决方案

#1

You are missing a } in your controller declaration and a [ in your filter declaration:

您在控制器声明中缺少一个}并且[在您的过滤器声明中：

var App = angular.module('App', []);

App.controller('ProjectCtrl', function($scope, $http) {
    $http.get('app/test.json')
         .then(function(res){
            $scope.projects = res.data;
          });
}); // You are missing a '}' here

App.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]); // You are missing a ']' here

You will also have to edit your JSON to escape your quotes "

您还必须编辑您的JSON以逃避您的报价“

[
    {
        "icon": "<i class=\"fa fa-github fa-3x\" aria-hidden=\"true\"></i>",
        "name": "lovelycss"
    }, {
        "icon": "<i class=\"fa fa-github fa-3x\" aria-hidden=\"true\"></i>",
        "name": "lovely-icons"
    }
]

And the expression you are passing to ng-bind-html is also wrong. Because of the single quotes ' you are passing a literal string '{{project.icon}}' to the filter. You have to remove the quotes and the curly braces, because the ng-bind-html directive needs an expression as a parameter.

你传递给ng-bind-html的表达式也是错误的。由于单引号，您将文字字符串'{{project.icon}}'传递给过滤器。您必须删除引号和花括号，因为ng-bind-html指令需要一个表达式作为参数。

<div ng-controller="ProjectCtrl">
  <ul>
    <li ng-repeat="project in projects">
     <div ng-bind-html="project.icon | to_trusted"></div>- <em>{{project.name}}</em>
    </li>
  </ul>
</div>

#2

The message tells you the problem: you have a syntax error. Two actually.

该消息告诉您问题：您有语法错误。其实两个。

1. the function for your controller is not closed.
2. 控制器的功能未关闭。
3. there is not closing bracket for the filter.
4. 过滤器没有关闭支架。

app.js

app.js

var App = angular.module('App', []);

App.controller('ProjectCtrl', function($scope, $http) {
  $http.get('app/test.json')
       .then(function(res){
          $scope.projects = res.data;
        });
}); // 1

App.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]); // 2

For JSON ERROR fix using this

对于JSON ERROR修复使用此

[
  { "icon": "<i class='fa fa-github fa-3x' aria-hidden='true'></i>", "name": "lovelycss" },
  { "icon": "<i class='fa fa-github fa-3x' aria-hidden='true'></i>", "name": "lovely-icons" }
]