laravel入力フィールド内でAngularJs関数を呼び出す方法

Question

私はHTMLフォームを持っています。そして、私はその形式でうまく角度jを使うことができます。 しかし、laravelフォームビルダーを使用してそのフォームフィールドを変換すると、エラーが発生しました。

これは私の単純なHTMLとAngularJsあり、それは細かい作業

var app = angular.module('mainApp', []); 
 
app.controller('availableDay', function($scope) { 
 
    $scope.dayfrom = ""; 
 
    $scope.dayto = ""; 
 
    $scope.dayfull = function() { 
 
    return $scope.dayfrom + "-" + $scope.dayto; 
 
    } 
 
});

<div class="form-group"> 
 
    <div class="row" ng-app="mainApp" ng-controller = "availableDay"> 
 
     <div class="col-lg-12"> 
 
      <h4 class="page-header">Available in a week</h4> 
 
      <div class="col-lg-6"> 
 
       <div class="form-group"> 
 
        <label>Day From</label> 
 
        <select class="form-control" ng-model = "dayfrom"> 
 
         <option>Monday</option> 
 
         <option>Tuesday</option> 
 
         <option>Wednesday</option> 
 
         <option>Thursday</option> 
 
         <option>Friday</option> 
 
         <option>Saturday</option> 
 
         <option>Sunday</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-6"> 
 
       <div class="form-group"> 
 
        <label>Day To</label> 
 
        <select class="form-control" ng-model="dayto"> 
 
         <option>Monday</option> 
 
         <option>Tuesday</option> 
 
         <option>Wednesday</option> 
 
         <option>Thursday</option> 
 
         <option>Friday</option> 
 
         <option>Saturday</option> 
 
         <option>Sunday</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-lg-12"> 
 
       <div class="form-group"> 
 
        <label>Available Day</label> 
 
        <input class="form-control" type="text" value="{{dayfull()}}"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

だが、私はそれがlaravelフォームビルダを使用して変換するつもりですしたときにエラーが

構文を生じましたエラー、予期しない '}'

var app = angular.module('mainApp', []); 
 
     app.controller('availableDay', function($scope) { 
 
      $scope.dayfrom = ""; 
 
      $scope.dayto = ""; 
 
      $scope.dayfull = function() { 
 
       return $scope.dayfrom + "-" + $scope.dayto; 
 
      } 
 
     });

<div class="form-group"> 
 
    <div class="row" ng-app="mainApp" ng-controller = "availableDay"> 
 

 
     <div class="col-lg-12"> 
 
      <h4 class="page-header">Available in a week</h4> 
 
      <div class="col-lg-6"> 
 
       <div class="form-group"> 
 

 
        {{ Form::label("day from","Day From ") }} 
 
    
 
        {{ Form::select('day_from', [ 
 
         'Monday' => 'Monday', 
 
         'Tuesday' => 'Tuesday', 
 
         'Wednesday' => 'Wednesday', 
 
         'Thursday' => 'Thursday', 
 
         'Friday' => 'Friday', 
 
         'Saturday' => 'Saturday', 
 
         'Sunday' => 'Sunday'], null, ['class' => 'form-control', 
 
         'ng-model' => 'dayfrom'] 
 
        ) }} 
 
        
 
       </div> 
 
      </div>  
 

 
      <div class="col-lg-6"> 
 
       <div class="form-group"> 
 
        {{ Form::label("day to","Day To ") }} 
 
    
 
        {{ Form::select('day_to', [ 
 
         'Monday' => 'Monday', 
 
         'Tuesday' => 'Tuesday', 
 
         'Wednesday' => 'Wednesday', 
 
         'Thursday' => 'Thursday', 
 
         'Friday' => 'Friday', 
 
         'Saturday' => 'Saturday', 
 
         'Sunday' => 'Sunday'], null, ['class' => 'form-control', 
 
         'ng-model' => 'dayto'] 
 
        ) }} 
 
       </div> 
 
      </div> 
 

 
      <div class="col-lg-12"> 
 
       <div class="form-group"> 
 
        {{ Form::label("available day","Available Day ") }} 
 

 
        {{ Form::text("available_day", {{dayfull()}}, ["class" => "form-control"]) }} 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

どのようにそのAngularJs関数{{dayfull（）}}内部Laravelフォームビルダーを使用できますか？

Answer 1

ここで問題となるのは、この形式では使用できないということです。 hereのように、ブレードとanglejsのマークアップが衝突します。あなたが周りに乗ることができる1つの方法は、マークアップを連結することです、それでエコーするとき、angularjsはそれを処理すべきです：

{{ Form::text("available_day", '{{'.'dayfull()'.'}}', ["class" => "form-control"]) }}