Javascript 以编程方式将URL加载到ng视图中_Javascript_Angularjs_Ng View

Javascript 以编程方式将URL加载到ng视图中

javascript angularjs

Javascript 以编程方式将URL加载到ng视图中,javascript,angularjs,ng-view,Javascript,Angularjs,Ng View,参考下面给出的代码，我希望能够从showTeam（）函数将viewTeamURL加载到ng视图。我该怎么做 <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/lib

参考下面给出的代码，我希望能够从

showTeam（）

函数将

viewTeam

URL加载到

ng视图

。我该怎么做

<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>


var teamApp=angular.module（“teamApp”，['ngRoute']）；
teamApp.controller（'teamController'，函数（$scope，$http）{
$http
.get（“/teams”）
.成功（功能（响应）{
$scope.teams=响应；
}
);
var showTeam=函数（id）{
}
});
teamApp.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider。
当（“/addTeam”{
templateUrl:'addTeam.htm'，
控制器：“AddTeamController”
}).
当（“/viewTeam”{
templateUrl:'viewTeam.htm'，
控制器：“ViewTeamController”
}).
否则({
重定向到：'/addTeam'
});
}]);
teamApp.controller（'AddTeamController'，函数（$scope）{
});
teamApp.controller（'ViewTeamController'，函数（$scope，$routeParams）{
});
新的
名称：{{team.Name}


描述：{{team.Description}}


显示
添加团队
待以后实施。
名称：{{team.Name}
描述：{{team.Description}}

您可以使用

$location

更改路径

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

您可以使用

$location

更改路径

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

在您的团队控制器中执行以下操作-

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

在ViewTeamController中，您可以这样获得id

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

在您的团队控制器中执行以下操作-

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

在ViewTeamController中，您可以这样获得id

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

您需要更改$routeprovider，以便viewTeam使用id参数。然后在viewTeamController中使用routeparams获取该id。这是你怎么做的。只需按照下面

脚本中的模式操作即可：
<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>


var teamApp=angular.module（“teamApp”，['ngRoute']）；
teamApp.controller（'teamController'，函数（$scope、$http、$location）{
$http
.get（“/teams”）
.成功（功能（响应）{
$scope.teams=响应；
}
);
var showTeam=函数（id）{
$location.url（“#/viewTeam/”+id）；//还有其他方法。
}
});
teamApp.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider。
当（“/addTeam”{
templateUrl:'addTeam.htm'，
控制器：“AddTeamController”
}).
当（'/viewTeam/：id'{
templateUrl:'viewTeam.htm'，
控制器：“ViewTeamController”
}).
否则({
重定向到：'/addTeam'
});
}]);
teamApp.controller（'AddTeamController'，函数（$scope）{
});
teamApp.controller（'ViewTeamController'，函数（$scope，$routeParams）{
警报（$routeParams.id）；//您可以在这里获得路由参数。
});

从视图导航时：
 <a href="#viewTeam/45">  



就你而言：
<a href="#viewTeam/{{team.id}}"> //to navigate from view.

//从视图中导航。
您需要更改$routeprovider，以便viewTeam获得id参数。然后在viewTeamController中使用routeparams获取该id。这是你怎么做的。只需按照下面脚本中的模式操作即可：
<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>


var teamApp=angular.module（“teamApp”，['ngRoute']）；
teamApp.controller（'teamController'，函数（$scope、$http、$location）{
$http
.get（“/teams”）
.成功（功能（响应）{
$scope.teams=响应；
}
);
var showTeam=函数（id）{
$location.url（“#/viewTeam/”+id）；//还有其他方法。
}
});
teamApp.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider。
当（“/addTeam”{
templateUrl:'addTeam.htm'，
控制器：“AddTeamController”
}).
当（'/viewTeam/：id'{
templateUrl:'viewTeam.htm'，
控制器：“ViewTeamController”
}).
否则({
重定向到：'/addTeam'
});
}]);
teamApp.controller（'AddTeamController'，函数（$scope）{
});
teamApp.controller（'ViewTeamController'，函数（$scope，$routeParams）{
警报（$routeParams.id）；//您可以在这里获得路由参数。
});

从视图导航时：
 <a href="#viewTeam/45">  



就你而言：
<a href="#viewTeam/{{team.id}}"> //to navigate from view.

//从视图中导航。
谢谢Alex。你的回答让我找到了解决办法。我很高兴能为你提供帮助：）谢谢亚历克斯。你的回答让我找到了解决办法。我很高兴能为你提供帮助：）