我正在尝试在我的角度页面中解析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加载图标和文本。
我希望现在这一点很清楚。
答案 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)
该消息告诉您问题:您有语法错误。实际上是两个。
<强> 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" }
]