Question

我希望当用户点击某个用户时，显示该信息的新视图。我有两个控件，第一个获取用户列表，并且它工作正常，但是第二个控制器具有用户id的hava param的功能，但是它们显示空白页面。我真的不知道如何从第二个控制器方法更正视图。这是我的代码：

<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'
             });
          }]);

然后在控制器中，检索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);

              };
         });

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

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

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

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

1 个答案: