使用控制器方法和路由重定向到其他视图

Question

我希望当用户点击某个用户时，显示该信息的新视图。我有两个控制器，首先获取用户列表，它工作正常，但第二个控制器具有用户 ID hava 参数的功能，但它们显示空白 page.I 真的不知道如何从第二个控制器方法重定向视图. 这是我的代码：

<html>
   
   <head>
      <title>Angular JS Views</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
   </head>
   
   <body>
   <h2>AngularJS Sample Application</h2>
      <div ng-app = "app">
         <p><a href = "#viewStudents">view Students</a></p>
         <p><a href = "#viewStudent">View Student</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "viewStudents.htm">
           <ul ng-repeat="entry in pacijenti">
    <li>{{ entry.ime }}</li>  
    <li>{{entry.prezime}}</li>  
    <li>{{entry.jmbg}}</li>
     <button type="button" ng-click="getP(entry.jmbg)" >
     </button>
 <a ng-href='#viewStudent' ng-click="myCtrl.getP(entry.jmbg)" >click me</a>
</ul>
         </script>
         
         <script type = "text/ng-template" id = "viewStudent.htm">
           <ul ng-repeat="entry2 in pac">
     
     <li>{{entry2.dijagnoza}}</li>
     <li>{{entry2.bolest}}</li>

     
    <a href="pocetna">link1</a>
</ul>
         </script>
      </div>

      
      <script>
         var app = angular.module("app", ['ngRoute']);
         
         app.config(['$routeProvider', function($routeProvider) {
             $routeProvider.
             
             when('/viewStudents', {
                templateUrl: 'viewStudents.htm',
                controller: 'HomeController'
             }).
             
             when('/viewStudent', {
                templateUrl: 'viewStudent.htm',
                controller: 'myCtrl'
             }).
             
             otherwise({
                redirectTo: '/viewsStudents'
             });
          }]);
          
         
         app.factory('photos', ['$http', function($http) {
           return $http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti")
                  .success(function(response) {
                    return response;
                  })
                  .error(function(response) {
                    return response;
                  });
         }]);
         app.controller('HomeController', ['$scope', 'photos', function($scope, photos) {
          $scope.pacijenti=this;
         
           photos.success(function(response) {
             $scope.pacijenti =response;
           });
           
         }]);
         
         app.controller('myCtrl', function($scope, $http) { 
          $scope.pac=this;
        
           $scope.getP=function(jmbg){
            $http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti/"+jmbg+"/pregledi")
            .then(function(response) {
                $scope.pac = response.data;
            }, function(response) {
                $scope.pac = "Something went wrong";
            });
            
         
            
            
            
           };
         });
         


         
        
         
       
      </script>
      
   </body>
</html>

Answer 1

修改您的路线以接受 jmbg id：

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

             when('/viewStudents', {
                templateUrl: 'viewStudents.htm',
                controller: 'HomeController'
             }).

             when('/viewStudent/:jmbg', {
                templateUrl: 'viewStudent.htm',
                controller: 'myCtrl'
             }).

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

然后在controller中，获取jmbg id:

app.controller('myCtrl', function($scope, $http, $routeParams) { 
             $scope.pac = this;
             $scope.jmbg = $routeParams.jmbg;

              $scope.getP = function(jmbg){
                  $http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti/"+jmbg+"/pregledi")
                  .then(function(response) {
                      $scope.pac = response.data;
                  }, function(response) {
                      $scope.pac = "Something went wrong";
                  });

            // Call the getP function with the jmbg id
            $scope.getP($scope.jmbg);

              };
         });

打开学生视图的 link 如下所示：

<a ng-href="#viewStudent/{{entry.jmbg}}">click me</a>

这是一个有效的 plunker 示例：https://plnkr.co/edit/99aDJkuvIDopNoILNFGB?p=preview -- 请注意，我删除了照片工厂的使用，而是硬编码示例数据。

使用控制器方法和路由重定向到其他视图

Redirect to other view with controller method and routh

angularjs

rest

angular-ui-router

angular-controller