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

时间:2016-09-09 10:17:18

标签: angularjs json

我正在尝试在我的角度页面中解析html值,不确定我做错了什么,我在控制台中收到此错误:

  

app.js:13 Uncaught SyntaxError:意外的令牌)

app.js

var arr = [7, 1, "abc", undefined, NaN], i;
for (i = 0; i < arr.length; i++){
    if (arr[i] !== arr[i]) {
        console.log('Element ' + i + ' is NaN');
    }
}

test.json

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);
    };
});

HTML:

[
  { "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" }
]

我要归档的内容是:http://jsfiddle.net/JfGVE/1547/

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

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

2 个答案:

答案 0 :(得分:4)

您的控制器声明中缺少},过滤器声明中缺少[

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

您还必须编辑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"
    }
]

您传递给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>

答案 1 :(得分:3)

该消息告诉您问题:您有语法错误。实际上是两个。

  1. 您的控制器功能未关闭。
  2. 过滤器没有关闭括号。
  3. <强> 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
    

    使用此

    进行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" }
    ]