如何在Laravel + AngularJs上的脚本标签中读取JSON


How to read JSON inside script tag on Laravel + AngularJs

我很困惑它未能在Angular + Laravel上使用JSON(5.2.11)

我的计划是,
1. 将 JSON 传送到刀片文件
2. 在脚本标记中获取 JSON,并将其设置为变量
3. 显示每个数据

我添加了插值提供程序以避免重复Laravel和Angular描述。但实际显示的数据是

检查了以下内容是我预期的显示。

var json = {!! $contents !!};  

控制器.php

public function show()
{
    $champions = DB::table('Champion')
        ->select('ChampionName', 'ChampionKey')
        ->orderBy('ChampionKey')
        ->get();
    return view('allChampionsPage')->with('contents', json_encode($champions));
}

所有冠军页面刀片.php

@extends('layouts.defaultAngular')
@section('menuItem1', 'When buy')
@section('menuItem2', 'When killed')
@section('menuItem3', 'Where lane')
@section('menuItem4', 'How many CS')
@section('menuItem5', 'Search')

defaultAngular.blade.php

<!DOCTYPE html>
<html lang="ja" ng-app="itemBuildStatisticsApp">
<head>
  <link rel="stylesheet" href="{{{asset('/css/bootstrap.css')}}}" type="text/css">
  <link rel="stylesheet" href="{{{asset('/css/default.css')}}}" type="text/css">
</head>
<body ng-controller="ChampionsController as ChampionsCtrl">
  <?php include_once("analytics/analyticstracking.php") ?>
  <div id="container">
    <div id="header" class="middleContentItem"></div>
    <div id="middle">
      <div id="menu" class="middleContentItem"></div>
      <div id="contents" class="middleContentItem">
        <ul ng-repeat="champion in ChampionsCtrl.champions">
          <% champion.ChampionKey + ', ' + champion.ChampionName %>
        </ul>
      </div>
    </div>
    <div id="right"></div>
    <div id="footer" class="middleContentItem"></div>
  </div>
  <script type="text/javascript">
    var json = {!! $contents !!};
    var app = angular.module('itemBuildStatisticsApp', [], funtion($interpolateProvider){
      $interpolateProvider.startSymbol('<%');
      $interpolateProvider.endSymbol('%>');
    });
    app.controller('ChampionsController', function(){
      this.champions = json.query();
    });
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>

修改的代码

  <script type="text/javascript">
var json = {!! $contents !!};
var app = angular.module('itemBuildStatisticsApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});
app.controller('ChampionsController', function(){
  this.champions = angular.fromJson(json);
});