从函数调用控制器并向其传递 URL 编码参数

Calling controller from function and passing it a URL-encoded parameter

本文关键字：URL 编码 参数 函数调用 控制器      更新时间：2023-09-26

我正在为Rest服务开发一个CRUD接口。目前，我可以设法获取系统中的团队列表。

我喜欢做的是在单击显示链接时显示详细信息。当前单击链接会调用一个函数（尚未实现），该函数应该将详细信息部分加载到ng-view中。该函数应将参数传递给ViewTeamController该参数随后将调用 Rest 服务并将结果提供给 $scope 变量。

我不确定如何使用 showTeam() 函数中的 URL 编码参数调用ViewTeamController。我还想知道如何在ViewTeamController内读取 URL 编码的参数.

提前谢谢。

<!doctype html>
<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-route.min.js"></script>
    <script>
        var teamApp = angular.module("teamApp", ['ngRoute']);
        teamApp.controller('teamController', function($scope, $http) {
            $http
                    .get('/teams')
                    .success(function(response) {
                        $scope.teams = response;
                    }
                    );
        });
        mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.
            when('/addTeam', {
                templateUrl: 'addTeam.htm',
                controller: 'AddTeamController'
            }).
            when('/viewTeam', {
                templateUrl: 'viewTeam.htm',
                controller: 'ViewTeamController'
            }).
            otherwise({
                redirectTo: '/addTeam'
            });
        }]);
        mainApp.controller('AddTeamController', function($scope) {
        });
        mainApp.controller('ViewTeamController', function($scope) {
        });
    </script>
</head>
<body>
<div ng-app = "teamApp" ng-controller="teamController">
    <a ng-click="newTeam()">new</a>
    <div ng-repeat="team in teams" >
        Name: {{team.name}}
        <br />
        Description: {{team.description}}
        <br />
        <a ng-click="showTeam(team.id)">show</a>
    </div>
    <div ng-view></div>
    <script type = "text/ng-template" id = "addTeam.htm">
        <h2> Add Team </h2>
        To be implemented later.
    </script>
    <script type = "text/ng-template" id = "viewTeam.htm">
        Name: {{team.name}}
        Description: {{team.description}}
    </script>
</div>
</body>
</html>

您的控制器函数可以通过 AngularJS $routeParams 服务访问路由参数，如下所示：

 mainApp.controller('ViewTeamController', function($scope, $routeParams) {
              $scope.param = $routeParams.param;  // will hold your encoded params
        });

考虑到您在 URL 中以类似这样的方式传递参数，

/viewTeam/23535t4645645g4t4

现在，您的$scope.param将保持23535t4645645g4t4

相关文章：