Загрузка URL в ng-просмотр программно

Ссылаясь на код, приведенный ниже, я хотел бы иметь возможность загрузить viewTeam URL в ng-view от showTeam() функция. Как я могу это сделать?

<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>
Источник

3 ответа

Решение

Вам нужно изменить свой $routeprovider, чтобы viewTeam ожидал параметр id. Затем получите этот идентификатор в viewTeamController, используя routeparams. Вот как ты это делаешь. Просто следуйте шаблону в 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.
Источник

В вашей команде Controller сделайте это -

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

В ViewTeamController вы можете получить идентификатор, как это

//Get id from url params
$location.search('id');
Источник

Ты можешь использовать $location изменить путь

    $scope.showTeam = function(view){
        $location.path("/viewTeam"); // path not hash
    }
Источник
Другие вопросы по тегам