从 laravel 传递 URL/路由参数并在 Angular 中使用

Question

我是 Laravel 5 和 Angular 的新手。 我将 Laravel 路由用于遍历和后端操作，使用 Angular 仅用于 UI 操作，例如获取数据和绑定 UI 网格等。

我在下面的 routes.php 文件中定义了以下路由

routes.php

Route::pattern('clientid', '[0-9]+');

//used for AJAX call from angularjs and populating ui-grid
Route::get('getclients/{clientid?}', 'ClientController@getClients');

//used for displaying Laravel view with ui-grid
Route::get('client/{clientid?}', 'ClientController@showClients');

请查找角度文件：

app.js

var appClients = angular.module('getclients', ['clientsService', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);

clientController.js

appClients.controller('ClientsController', ['$scope', '$http', 'Client', '$interval', '$q', function ($scope, $http, Client, $interval, $q) {
/* Defining UI grid options*/
.
.
/* Calling service to fill the grid*/
Client.get(clientid)
                .success(function (data, status, headers, config) {
                    if (data.length > 0) {
                        $scope.gridOptions.data = data;
                    }
                });
}

clientsService.js

angular.module('clientsService', [])
        .service('Client', function ($http) {
            return {
                // Get all the photos
                get: function (clientid) {
                    if (clientid !== '') {
                        return $http.get('/myproject/public/getclients/' + clientid);
                    }
                    else {
                        return $http.get('/myproject/public/getclients/');
                    }
                }
            }
        });
/*
    **Note:**
    Have already defined route in routes.php for using the same above:    
    Route::get('getclients/{clientid?}', 'ClientController@getClients');
*/

示例：

Step 1:
Say I am hitting URL: http://<domain>/public/myproject/client/2

The following route would catch it and redirect to view where the ui-grid is present
    Route::get('client/{clientid?}', 'ClientController@showClients');

Step 2:        
    Now, somehow need to figure out how to pass that **2** to angular so that I could pass that parameter while making ajax call and get grid data

我很困惑如何在 angular 中使用 Laravel 的 url 参数？

我认为我在这里遗漏了一些概念或做错了什么。

谁能帮帮我？

Answer 1

只是一种解决方法，使其可以使用 angular 和不使用 jquery。

从 routes.php 将控制权转移到 ClientsController.php 中的 showClients 动作

ClientsController.php（Laravel 控制器）：

使用以下语句将变量从控制器传递到 Laravel 视图：

public function showClients($clientid = '') {
 return view('masters.clients', compact('clientid'));
}

Clients.php（Laravel 视图）

将 clientidmodel 添加为 ng-model 并使用 ng-init 从 Laravel 控制器传递的 clientid 对其进行初始化

<div ng-app="">
   <div ng-controller="ClientsController">
       <input type="text" name="txtClientId" ng-model="clientidmodel" style="display: none;" ng-init="clientidmodel = '{!!$clientid!!}'"/>
   </div>
</div> 

clientController.js

将手表添加到角度模型中，以便我们可以捕获传递的初始值。

$scope.$watch("clientidmodel", function () {
           Client.get($scope.clientidmodel)
                   .success(function (data, status, headers, config) {
                       if (data.length > 0) {
                           $scope.gridOptions.data = data;
                       }
                   });
       });

不确定这是否是有效的方法，但到目前为止，使用此解决方法可以解决问题。

如果有更好的方法来解决这个问题，请告诉我。

Answer 2

您可以通过

在 jquery 中实现这一点

var pathname = window.location.href;
var lastItem = pathname.split("/").pop(-1);

注意：在这里你会得到最后一个元素

即，

如果您的网址类似于yourapp.com/app#/product/15，则脚本将返回15。这是 / 之后的最后一个元素。您可以根据自己的意愿更改此设置。

然后你可以直接在你的 Laravel 控制器中传递值。

        $.ajax({
    type: "POST",
    dataType: 'text',
    crossOrigin : true,
    data: {param : lastItem},
    url: serviceUrl+'/getReceipeDetails',
})
    .done(function( data ) {
        var result = jQuery.parseJSON(data);
        if(result.success==1)
        {
        $(".yourresult").html('Controller return success');
        }
        else
        {
        $(".yourresult").html('Controller return failure');
        }
    })
    .fail( function(xhr, textStatus, errorThrown) {
    console.log(errorThrown);
    });