53

JavaScript 有什么方法可以从 Laravel Blade 模板中的控制器获取变量？

示例：我有以下代码：

$langs = Language::all();
return View::make('NAATIMockTest.Admin.Language.index',compact('langs'));

我可以获取$langs并将其传递给 JavaScript 吗？我已经使用了PHP-Vars-To-Js-Transformer。但是当我JavaScript::put()在控制器中使用两个功能时。它没有用。有什么帮助吗？

这是我在控制器中的创建功能：

public function create()
{
    $names = $this->initLang();
    Javascript::put([
        'langs' => $names
    ]);
    
    return View::make('NAATIMockTest.Admin.Language.create',compact('names'));
}

这是我的观点：

@extends('AdLayout')
@section('content')
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('langCtrl', function($scope) {
        $scope.languages = langs;
    });
</script>
    
<div class="container-fluid" ng-app="myApp" ng-controller="langCtrl">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>Create language</h2>
                </div>
                    
                <div class="panel-body">
                    {!! Form::open() !!}
                        <p class="text-center">
                            {!! Form::label('Name','Language: ') !!}
                            <input type="text" name="searchLanguage" ng-model="searchLanguage">
                        </p>
    
                        <select name="Name[]" multiple size="10" ng-model="lang" ng-click="show()">
                            <option value="@{{v}}" ng-repeat="(k,v) in languages | filter:searchLanguage">
                                @{{v}}
                            </option>
                        </select><br>
    
                        <div class="text-center">
                            {!! Form::submit('Create',['class'=>'btn btn-primary']) !!}&nbsp;
                            {!!   Html::linkAction('NAATIMockTest\LanguageController@index', 'Back', null, array('class' => 'btn btn-primary')) !!}
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

我在配置文件夹中的 javascript.php：

<?php
return [
    'bind_js_vars_to_this_view' => 'footer',
    'bind_js_vars_to_this_view' => 'NAATIMockTest.Admin.Language.create',
    'bind_js_vars_to_this_view' => 'NAATIMockTest.Admin.Language.edit',
    
    'js_namespace' => 'window',
];

这个想法是：我在 MySQL 中有一种表语言。我想显示具有多个属性的下拉列表可供选择，并且我也想使用 angularjs 进行搜索。这就是为什么我想将变量从控制器传递给 JavaScript。此外，我在 LanguageController 中有一个名为 initLang 的函数来检查数据库中是否存在任何语言，它不会显示在创建视图的下拉列表中。

4

10 回答 10

108

对我来说是一个工作示例。

控制器： 

public function tableView()
{
    $sites = Site::all();
    return view('main.table', compact('sites'));
}

看法：

<script>    
    var sites = {!! json_encode($sites->toArray()) !!};
</script>

为了防止恶意/意外行为，您可以JSON_HEX_TAG按照 Jon 在链接到此SO 答案的评论中的建议使用

<script>    
    var sites = {!! json_encode($sites->toArray(), JSON_HEX_TAG) !!};
</script>
于 2015-07-03T07:32:07.703 回答
37

标准 PHP 对象

向 JavaScript 提供 PHP 变量的最佳方式是json_encode. 使用 Blade 时，您可以执行以下操作：

<script>
    var bool = {!! json_encode($bool) !!};
    var int = {!! json_encode($int) !!};
    /* ... */
    var array = {!! json_encode($array_without_keys) !!};
    var object = {!! json_encode($array_with_keys) !!};
    var object = {!! json_encode($stdClass) !!};
</script>

还有一个用于解码的 Blade 指令JSON。我不确定从哪个版本的 Laravel 但在 5.5 中可用。像下面这样使用它：

<script>
    var array = @json($array);
</script>

Jsonable的

例如，当使用 Laravel 对象时Collection，Model您应该使用该->toJson()方法。所有实现该\Illuminate\Contracts\Support\Jsonable接口的类都支持此方法调用。呼叫自动返回JSON。

<script>
    var collection = {!! $collection->toJson() !!};
    var model = {!! $model->toJson() !!};
</script>

使用Model类时，您可以在 中定义$hidden属性class，这些属性将在JSON. $hidden正如其名称所描述的，该属性隐藏了敏感内容。所以这个机制对我来说是最好的。这样做如下：

class User extends Model
{
    /* ... */

    protected $hidden = [
        'password', 'ip_address' /* , ... */
    ];

    /* ... */
}

在你视野的某个地方

<script>
    var user = {!! $user->toJson() !!};
</script>
于 2017-07-06T17:12:57.623 回答
15

假设您有一个名为$services您要传递给视图的集合。

如果您需要一个带有 names 的 JS 数组，您可以按如下方式对其进行迭代：

<script>
    const myServices = [];
    @foreach ($services as $service)
        myServices.push('{{ $service->name }}');
    @endforeach
</script>

注意：如果字符串有特殊字符（如ó或 HTML 代码），您可以使用{!! $service->name !!}.

如果您需要一个对象数组（具有所有属性），您可以使用：

<script>
  const myServices = @json($services);
  // ...
</script>

注意：此刀片指令@json不适用于旧 Laravel 版本。您可以使用json_encode其他答案中描述的方法获得相同的结果。

有时您不需要将完整的集合传递给视图，只需一个具有 1 个属性的数组即可。如果这是你的情况，你最好$services = Service::pluck('name');在你的控制器中使用。

于 2017-01-15T19:44:06.120 回答
5 
$langs = Language::all()->toArray();
return View::make('NAATIMockTest.Admin.Language.index', [
    'langs' => $langs
]);

然后在视图中

<script type="text/javascript">
    var langs = {{json_encode($langs)}};
    console.log(langs);
</script>

它不漂亮

于 2015-05-06T14:43:25.553 回答
4

试试这个 - https://github.com/laracasts/PHP-Vars-To-Js-Transformer 是将 PHP 变量附加到 Javascript 的简单方法。

于 2017-10-18T08:08:59.393 回答
2

最好的方法是将它放在 php Blade 中的隐藏 div 中

<div hidden id="token">{{$token}}</div>

然后在 javascript 中将其作为常量调用以避免未定义的 var 错误

const token = document.querySelector('div[id=token]').textContent

// console.log(token)
// eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI5MjNlOTcyMi02N2NmLTQ4M2UtYTk4Mi01YmE5YTI0Y2M2MzMiLCJqdGkiOiI2Y2I1ZGRhNzRhZjNhYTkwNzA3ZjMzMDFiYjBiZDUzNTZjNjYxMGUyZWJlNmYzOTI5NzBmMjNjNDdiNjhjY2FiYjI0ZWVmMzYwZmNiZDBmNyIsImlhdCI6IjE2MDgwODMyNTYuNTE2NjE4IiwibmJmIjoiMTYwODA4MzI1Ni41MTY2MjUiLCJleHAiOiIxNjIzODA4MDU2LjMxMTg5NSIsInN1YiI6IjUiLCJzY29wZXMiOlsiYWRtaW4iXX0.GbKZ8CIjt3otzFyE5aZEkNBCtn75ApIfS6QbnD6z0nxDjycknQaQYz2EGems9Z3Qjabe5PA9zL1mVnycCieeQfpLvWL9xDu9hKkIMs006Sznrp8gWy6JK8qX4Xx3GkzWEx8Z7ZZmhsKUgEyRkqnKJ-1BqC2tTiTBqBAO6pK_Pz7H74gV95dsMiys9afPKP5ztW93kwaC-pj4h-vv-GftXXc6XDnUhTppT4qxn1r2Hf7k-NXE_IHq4ZPb20LRXboH0RnbJgq2JA1E3WFX5_a6FeWJvLlLnGGNOT0ocdNZq7nTGWwfocHlv6pH0NFaKa3hLoRh79d5KO_nysPVCDt7jYOMnpiq8ybIbe3oYjlWyk_rdQ9067bnsfxyexQwLC3IJpAH27Az8FQuOQMZg2HJhK8WtWUph5bsYUU0O2uPG8HY9922yTGYwzeMEdAqBss85jdpMNuECtlIFM1Pc4S-0nrCtBE_tNXn8ATDrm6FecdSK8KnnrCOSsZhR04MvTyznqCMAnKtN_vMDpmIAmPd181UanjO_kxR7QIlsEmT_UhM1MBmyfdIEvHkgLgUdUouonjQNvOKwCrrgDkP0hkZQff-iuHPwpL-CUjw7GPa70lp-TIDhfei8T90RkAXte1XKv7ku3sgENHTwPrL9QSrNtdc5MfB9AbUV-tFMJn9T7k
于 2020-12-16T14:09:08.560 回答
1

很简单，我用这段代码：

控制器：

$langs = Language::all()->toArray();
return view('NAATIMockTest.Admin.Language.index', compact('langs'));

查看：

<script type="text/javascript">
    var langs = <?php echo json_decode($langs); ?>;
    console.log(langs);
</script>

希望它有所帮助，问候！

于 2018-06-07T00:04:28.867 回答
0

在控制器中

 $langs = Language::all();
 return View::make('NAATIMockTest.Admin.Language.index',compact('langs'))

有时您可能会将数组传递给您的视图，以便将其呈现为 JSON 以初始化 JavaScript 变量。

在视野中

<script>
    var app = <?php echo json_encode($langs); ?>;
    console.log($langs);
</script>

这是官方参考在此处输入链接描述

于 2021-08-25T15:46:49.937 回答
0

看法

<script>  
       var langs = JSON.parse({!! json_encode($langs) !!});
</script>
于 2021-11-29T06:05:04.140 回答
0

这很简单，它对我有用......

只需将 PHP 变量传递到单引号中...

<script>
    var collection = '{{ $collection }}';
</script>
于 2021-08-04T18:02:16.593 回答