以編程方式將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中

回答

相關問題