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

参照下面给出的代码，我希望能够从showTeam()函数将viewTeam URL加载到ng-view中。我怎样才能做到这一点？以编程方式将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>

来源

2016-02-26 Sandah Aung

您需要更改您的$ 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.

来源

2016-02-26 11:10:20

感谢亚历克斯。你的回答让我找到了解决方案。 –

我很高兴我可以帮助你:) –

可以使用$location改变路径

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

来源

2016-02-26 10:56:29 harishr

在你teamController做到这一点 -

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

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

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

来源

2016-02-26 10:58:49

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

回答

相关问题