从laravel传递URL / route参数并使用angular

时间:2015-11-19 09:07:38

标签: angularjs routes laravel-5

我是Laravel 5和棱角分明的新手。 我正在使用Laravel路由进行遍历和后端操作,并使用角度来进行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

我很困惑如何使用Laravel中的url参数?#/ p>

我认为我错过了一些概念或在这里做错了。

有人可以帮帮我吗?

2 个答案:

答案 0 :(得分:0)

只是一种解决方法,使其可以使用角度和没有jquery。

从routes.php,控件转移到ClientsController.php中的showClients操作

ClientsController.php(Laravel Controller):

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

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

Clients.php(Laravel View)

将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;
                       }
                   });
       });

不确定这是否是有效的方法,但截至目前已经解决了这个问题。

如果有更好的方法可以让我知道。

答案 1 :(得分:-1)

您可以通过

在jquery中实现此目的
var pathname = window.location.href;
var lastItem = pathname.split("/").pop(-1);

注意:在这里,您将获得最后一个元素

即,

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

然后您可以直接在Laravel Controller中传递值。

        $.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);
    });