web-dev-qa-db-ja.com

laravel-5変数をJavaScriptに渡す

javaScriptがコンパクトコントローラーLaravel-5から変数を取得する方法はありますか。

例：以下のコードがあります：

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

この言語を取得してJavaScriptに渡すことはできますか？既にPHP-Vars-To-Js-Transformerを使用しました。しかし、コントローラーの2つの関数に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');

    }

これは私のビュー作成です：

 @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

これは私のビュー編集です：

 @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

configフォルダー内の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に渡したいのです。さらに、言語がデータベース内に存在するかどうかを確認するinitLangと呼ばれるLanguageController内の関数があり、ビューの作成時にドロップダウンリスト内に表示されません。

javascriptlaravellaravel-5
25
user1610851

私のための1つの実例。

コントローラ：

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

見る：

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

悪意のある/意図しない動作を防ぐために、これにリンクするコメントでJonが示唆するJSON_HEX_TAGを使用できます SO answer

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

標準のPHPオブジェクト

PHP変数をJavaScriptに提供する最良の方法は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>

JSONにデコードするためのBladeディレクティブもあります。 Laravelのどのバージョン以降かはわかりませんが、5.5では使用可能です。次のように使用します。

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

Jsonable's

Laravelオブジェクトを使用する場合（例： CollectionまたはModel->toJson()メソッドを使用する必要があります。 \Illuminate\Contracts\Support\Jsonableインターフェイスを実装するすべてのクラスは、このメソッド呼び出しをサポートしています。呼び出しは自動的にJSONを返します。

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

Modelクラスを使用する場合、class内で$hiddenプロパティを定義でき、それらはJSONでフィルターされます。 $hiddenプロパティは、その名前の説明として、機密コンテンツを隠します。したがって、このメカニズムは私にとって最適です。次のようにしてください：

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

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

    /* ... */
}

そしてあなたの意見のどこか

<script>
    var user = {!! $user->toJson() !!};
</script>
15
algorhythm
$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>

それはかなりカントーではありません

3
Pawel Bieszczad

これを試してください- https://github.com/laracasts/PHP-Vars-To-Js-Transformer PHP変数をJavascriptに追加する簡単な方法です。

2
PawelW

私は次の行が最適化されていないことを知っていますが、それはそれを機能させるための高速で読みやすい方法です：

<script>
    var sampleTags = [];
    @foreach ($services as $service)
        sampleTags.Push('{{ $service->name }}');
    @endforeach
</script>

編集：申し訳ありませんが、文字列に特殊文字（óなど）が含まれる場合、{!! $service->name !!}を使用する必要があります。

1
JCarlos

非常に簡単です、私はこのコードを使用します：

コントローラー：

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

よろしくお願いします！

0
Radames E. Hernandez