laravel-5将变量传递给JavaScript

Question

是否有任何方法可以从紧凑型控制器Laravel-5获取变量.

示例:我有以下代码:

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

我可以获得这个lang并将其传递给JavaScript吗？我已经使用过PHP-Vars-To-Js-Transformer.但是当我在控制器中使用JavaScript :: put两个函数时.它没用.有帮助吗？

这是我使用PHP-Vars-To-Js-Transformer的代码:

LanguageController:这是我的创建和编辑功能:

public function create()
       {
          $names = $this->initLang();
          Javascript::put([
            'langs' => $names
            ]);

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


           return View::make('NAATIMockTest.Admin.Language.edit', compact('lang'));
           // return View::make('NAATIMockTest.Admin.Language.edit');

    }

这是我的View创建:

 @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

这是我的View编辑:

 @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>Edit #{{ $lang->id}}</h2></div>
                <div class="panel-body">
                    {!! Form::model($lang) !!}
                        {!! Form::label('Name','Language: ') !!}&nbsp;{{ $lang->Name }}
                        <!-- {!! Form::text('Name',null,['disabled']) !!}<br> -->
                        {!! Form::hidden('id') !!}<input type="text" name="searchLanguage" ng-model="searchLanguage">
                        </p>

                        <select name="Name[]" size="10">
                            <option value="@{{v}}" ng-repeat="(k,v) in languages | filter:searchLanguage">
                                @{{v}}
                            </option>
                        </select><br>
                        <div class="text-center">
                            {!! Form::submit('Update',['class'=>'btn btn-info']) !!}&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 [

    /*
    |--------------------------------------------------------------------------
    | View to Bind JavaScript Vars To
    |--------------------------------------------------------------------------
    |
    | Set this value to the name of the view (or partial) that
    | you want to prepend all JavaScript variables to.
    |
    */
    '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',

    /*
    |--------------------------------------------------------------------------
    | JavaScript Namespace
    |--------------------------------------------------------------------------
    |
    | By default, we'll add variables to the global window object. However,
    | it's recommended that you change this to some namespace - anything.
    | That way, you can access vars, like "SomeNamespace.someVariable."
    |
    */
    'js_namespace' => 'window',

];

我的想法是:我在mysql中有一个表语言.我想显示下拉列表中有多个属性可供选择,我也想用angularjs进行搜索.这就是我想将变量从控制器传递给JavaScript的原因.另外,我在LanguageController里面有一个名为initLang的函数来检查数据库中是否存在任何语言,它在创建视图时不会显示在下拉列表中.

Answer 1

一个工作的例子给我.

控制器:

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>

Answer 2

标准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>

• 显示未转义的数据 - Laravel docs
• json_encode - PHP文档

还有一个用于解码的Blade指令JSON.我不确定自哪个版本的Laravel,但在5.5中它可用.使用如下:

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

• 刀片模板 - Laravel 5.5文档

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>

• 序列化为JSON - Laravel文档

Answer 3

假设您有一个名为$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');在你的控制器中使用。

Answer 4

2022年

Laravel 已更新，因此现在可以简化为：

<script>const langs = {{ Js::from(Language::all()) }};</script>

或者，对于任何 PHP 对象：

<script>const jsObject = {{ Js::from($phpObject) }};</script>

这还添加了Ken 的JSON_HEX_TAG回答中提到的 s 。

Answer 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>

它不漂亮