以编程方式将 URL 加载到 ng-view

Question

参考下面给出的代码，我希望能够从 showTeam() 函数将 viewTeam URL 加载到 ng-view 中。我该怎么做？

<html>

<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/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;
                    }
                    );


            var showTeam = function(id) {

            }
        });

        teamApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.

            when('/addTeam', {
                templateUrl: 'addTeam.htm',
                controller: 'AddTeamController'
            }).

            when('/viewTeam', {
                templateUrl: 'viewTeam.htm',
                controller: 'ViewTeamController'
            }).

            otherwise({
                redirectTo: '/addTeam'
            });
        }]);

        teamApp.controller('AddTeamController', function($scope) {

        });

        teamApp.controller('ViewTeamController', function($scope, $routeParams) {

        });

    </script>
</head>

<body>

<div ng-app = "teamApp" ng-controller="teamController">

    <button ng-click="newTeam()">new</button>

    <div ng-repeat="team in teams" >
        Name: {{team.name}}
        <br />
        Description: {{team.description}}
        <br />
        <button ng-click="showTeam(team.id)">show</button>
    </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

您可以使用$location更改路径

    $scope.showTeam = function(view){
        $location.path("/viewTeam"); // path not hash
    }

Answer 2

在您的 teamController 中执行此操作 -

var showTeam = function(id) {
    $location.path('/viewTeam.htm').search({'id': id});
}

在ViewTeamController中你可以得到这样的id

//Get id from url params
$location.search('id');

Answer 3

您需要更改您的 $routeprovider 以便 viewTeam 需要一个 id 参数。然后使用 routeparams 在 viewTeamController 中获取该 ID。这是你如何做的。只需遵循下面 script 中的模式：

<script>
            var teamApp = angular.module("teamApp", ['ngRoute']);

            teamApp.controller('teamController', function($scope, $http,$location) {

                $http
                        .get('/teams')
                        .success(function(response) {
                            $scope.teams = response;
                        }
                        );


                var showTeam = function(id) {
               $location.url("#/viewTeam/" + id);//there are other means as well.
                }
            });

            teamApp.config(['$routeProvider', function($routeProvider) {
                $routeProvider.

                when('/addTeam', {
                    templateUrl: 'addTeam.htm',
                    controller: 'AddTeamController'
                }).

                when('/viewTeam/:id', {
                    templateUrl: 'viewTeam.htm',
                    controller: 'ViewTeamController'
                }).

                otherwise({
                    redirectTo: '/addTeam'
                });
            }]);

            teamApp.controller('AddTeamController', function($scope) {

            });

            teamApp.controller('ViewTeamController', function($scope, $routeParams) {
            alert($routeParams.id);//you get the route params here.
            });
    </script>

从视图导航时：

 <a href="#viewTeam/45">

你的情况：

<a href="#viewTeam/{{team.id}}"> //to navigate from view.

以编程方式将 URL 加载到 ng-view

Loading URL into ng-view programatically

javascript

angularjs

ng-view