Question

我正在使用Laravel＆amp; amp;角。

我在Laravel中定义了一条路线

Route::get('/deal-coupons/{merchant_id}', function() {
    return view('mlpdeals');
});

我想要做的是将merchant_id传递给我的角度视图。

在我的公开文件夹中，我创建了一个 app.js

var app = angular.module('deals', [])
    .constant('API_URL', 'http://www.coupon.local/api/getdealsbymerchant/');

我还创建了一个控制器

app.controller('dealsController', function($scope, $http, API_URL) {
//retrieve employees listing from API
$http.get(API_URL + "1032")
        .success(function(response) {
            $scope.deals = response;
        });
});

在我的mlp.php视图中，我有

<!DOCTYPE html>
<html lang="en-US" ng-app="deals">
<head>
    <title>Laravel 5 AngularJS CRUD Example</title>

    <!-- Load Bootstrap CSS -->
    <link href="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>
    <h2>Employees Database</h2>
    <div  ng-controller="dealsController">

        <!-- Table-to-load-the-data Part -->
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Deal Text</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="deal in deals">
                    <td>{{ deal.deal_id }}</td>
                    <td>{{ deal.deal_text }}</td>
                </tr>
            </tbody>
        </table>
        <!-- End of Table-to-load-the-data Part -->
    </div>

    <!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
    <script src="<?= asset('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js') ?>"></script>
    <script src="<?= asset('https://code.jquery.com/jquery-1.11.3.js') ?>"></script>
    <script src="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js') ?>"></script>

    <!-- AngularJS Application Scripts -->
    <script src="<?= asset('app/app.js') ?>"></script>
    <script src="<?= asset('app/controllers/deals.js') ?>"></script>
</body>

如您所见，我手动将merchant_id写入我的API调用。如何确保我可以从URL获取merchant_id并将其传递给我的控制器？

Answer 1

有几种方法，但更容易将它添加到Laravel刀片中的隐藏字段，并让Angular读取它。

路线：

Route::get('/deal-coupons/{merchant_id}', function($merchant_id) {
    return view('mlpdeals',compact($merchant_id));
});

模板

<div  ng-controller="dealsController">
<input type="hidden" value="{{$merchant_id}}">
        <!-- Table-to-load-the-data Part -->

当您使用Blade和AngularJS时，它们都使用相同的指令{{}}，您有两种选择。要么在没有Blade的情况下继续使用，请使用正常的PHP回声：

<div  ng-controller="dealsController">
    <input type="hidden" value="<?=$merchant_id?>">
            <!-- Table-to-load-the-data Part -->

或者更好地使用Blade并指导它，而不是通过使用@符号转义它们来处理Angular变量：

 <tbody>
                <tr ng-repeat="deal in deals">
                    <td>@{{ deal.deal_id }}</td>
                    <td>@{{ deal.deal_text }}</td>
                </tr>
            </tbody>

但是，请注意客户端可以轻松更改此值，因此如果您想对此进行更多控制，那么通过API调用从Laravel获取该变量会更好，并接收它在JSON变量中。

将路由参数从Laravel传递到Angular

1 个答案:

路线：

模板