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

Question

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

我喜欢做的是在我点击显示时显示详细信息link。当前单击 link 会调用一个函数（尚未实现），该函数应该将详细信息部分加载到 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>

Answer 1

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

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

考虑到您在 URL、

中像这样传递参数

/viewTeam/23535t4645645g4t4

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

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

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

javascript

angularjs

angularjs-routing