javascript - 将 JSON 从 Laravel 5.1 Controller 传递到 JS (AngularJS) 被单引号破坏

标签 javascript angularjs json laravel-5

在我们的遗留代码中,来自 Laravel Controller 的数据被发送到 View 以便与 Javascript 一起使用:

$scope.users = JSON.parse('{!! $users or "{}" !!}');

正如您可以想象的,由于它将数据作为一个大的 JSON 字符串引入,并用单引号括起来,因此如果数据中包含单引号,则会中断。

我将改进我们的做法,但在开始这样的探索之前,我想看看要记住哪些方法或最佳实践,并想知道其他人如何将 Laravel Controller 中的数据引入到 View 中的 JavaScript。

我尝试过其他方法,例如使用 PHP 的 addslashes() 和 htmlentities(),但这些方法似乎很严厉,而且步骤可能比应该的要多。如何最好地从 Laravel 转换或编码这些数据?

最佳答案

将数据直接从模板语言插入到 javascript 文件中并不是最好的主意。将用户数据加载到 Angular 中的一种更好的方法是从 API 端点提供服务,而且一般而言,这种方法对于可扩展性也更好。然后,您可以使用 Angular 的 $http (或 $resource)从为 View 分配的 URL 中检索数据,并将其加载到 Controller 中。

angular.module('app').controller(function($http, $scope) {
    $http.get('/api/v1/users/', function(response) {
        $scope.users = response.data;
    })
})

但是,如果您必须,可以使用ng-init指令将数据插入 Controller :

<body ng-controller="exampleCtrl" ng-init="users = {!! $users or "{}" !!}">
    <!--- the rest of your html --->
</body>

关于javascript - 将 JSON 从 Laravel 5.1 Controller 传递到 JS (AngularJS) 被单引号破坏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42258548/

相关文章:

javascript - 确认消息不起作用

Javascript:修改数组深处的值

javascript - 如果我可以使用 $scope.$root,为什么还要使用 $rootScope?

javascript - 为 Controller 全局缓存 $resource api 请求

javascript - 从客户端 JavaScript AJAX 调用 WebAPI GET 方法,出现错误

javascript - 如何在 Javascript 中对图像对象进行动画处理?

javascript - 另一个 map 调用中的异步 Array.map()

javascript - Md-tabs AngularJS 只工作一次

c# - 通过 AJAX 将数组传递给 Controller Action

javascript - Keen.io JS api 响应 {"code": "UnknownError"} when event created OK