Question

我正在尝试使用ng-init + stringify将JSON对象传递给我的应用程序，但它不起作用我得到了Lexer错误。

Lexer Error: Unexpected nextharacter at columns 8-8 [#] in expression [friends=#{JSON.stringify(friends)}].

的Javascript

var friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}
];

</script>

HTML

<div ng-init="friends=#{JSON.stringify(friends)}"></div>

Answer 1

您应该尝试使用这些引号：

<div ng-init="friends='#{JSON.stringify(friends)}'"></div>

我不知道你的模板引擎是什么，但以ejs为例：

<div ng-init="friends='<%= JSON.stringify(friends) %>'"></div>

此外，如果您对某些简单或/和双打引号有问题，可以使用这样的正则表达式替换它们：

<div ng-init="friends='<%= JSON.stringify(friends).replace(/"/g, "\\\"").replace(/'/g, "\\'") %>'">

我不知道它是否是角色中的最佳做法，但是由于这个原因，我可以将以前从服务器检索到的一些数据共享到角度。这样我就阻止了Angulars控制器向请求后端的公共API发出的许多请求。

在棱角分明的一面，你可以这样做：$scope.friends = JSON.parse(friends)来“揭露”你的json。

Answer 2

您必须以角度方式执行此操作，您可以使用angularjs的$window访问javascript变量并将其转换为控制器中的$scope变量，并可以在html中访问它

看看你的代码，我只是稍微修改它以使它工作，

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="myController">
<h1>Hello Plunker!</h1>
<script>
  var friends = [
    {name:'John', phone:'555-1276'},
    {name:'Mary', phone:'800-BIG-MARY'},
    {name:'Mike', phone:'555-4321'},
    {name:'Adam', phone:'555-5678'},
    {name:'Julie', phone:'555-8765'},
    {name:'Juliette', phone:'555-5678'}
  ];

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

app.controller('myController', ['$scope', '$window', function($scope, $window) {
  $scope.friendsInscope = $window.friends;
}]);

</script>
<!--<div ng-init="friends=#{JSON.stringify(friends)}">{{friends}}</div>-->
<div ng-init="friends=friendsInscope">{{friends|| json}}</div>
</body>

</html>

Working plunker

希望这有帮助！

Answer 3

Angular正在使用范围，它无法访问全局变量/函数。因此，它永远不会使用您的friends变量，也无法从表达式访问JSON.stringify。此外，Angular中没有#{}运算符，它在错误描述中告诉您。

我建议你阅读：

将JSON对象传递给ng-init

3 个答案: