javascript - 在 window.location 中的路径后面附加来自 Angular 的参数

Question

我有一个 html 文件，它使用 Angular 脚本显示动态表:

<h2 class="sub-header" style="color:#4e67c3;">Elenco macchinette</h2>
          <div class="table-responsive">
            <table id="thetable">
                
             
                <tr> 
                    <th class="th2">Id</th> 
                    <th class="th2">Data Creazione</th>  
                    <th class="th2">Categoria</th>  
                    <th class="th2">Capacità</th>  
                    <th class="th2">Area geografica</th>  
                    <th class="th2">&nbsp;&nbsp;Attivo&nbsp;&nbsp;</th>  
                    
             </tr> 
             
              
      
                
                <tr ng-repeat="dispensercategory in dispensercategories">  
                 
          
            <td onclick="window.location='#showemp/{{ dispensercategory.dispenser.iddispenser }}'"> {{ dispensercategory.dispenser.iddispenser }}</td>  
            <td> {{ dispensercategory.dispenser.creationDate }}</td>
            <td> {{ dispensercategory.category.description }}</td>  
            <td> {{ dispensercategory.dispenser.capacity.type }}</td>  
            <td> {{ dispensercategory.dispenser.geoArea.city }}</td>  
            <td> {{ dispensercategory.dispenser.stateOn }}</td>  
    

            </tr>  
          
            </table>
              
              
    <h2 class="sub-header" style="color:#4e67c3;">Dipendenti macchinette</h2>
          <div class="table-responsive">
            <table id="thetable">
                
             
                <tr> 
                    <th class="th2">Nome</th> 
                    <th class="th2">Cognome</th>  
                    <th class="th2">Data di nascita</th>  
                    <th class="th2">Telefono</th>  
                    <th class="th2">Id macchinetta</th>   
                    
             </tr> 
             
              
      
                
                <tr ng-repeat="staffdispenser in staffdispensers">  
                 
          
            <td onclick="window.location='#/showemp'"> {{ staffdispenser.staff.name }}</td>  
            <td> {{ staffdispenser.staff.surname }}</td>
            <td> {{ staffdispenser.staff.birthDate }}</td>  
            <td> {{ staffdispenser.staff.phone }}</td>  
            <td> {{ staffdispenser.dispenser.iddispenser }}</td>   
    

            </tr>  
          
            </table>
              
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
    <script src="scripts/rest-services.js"></script>
    <script src="scripts/main-admin.js"></script>
 
    <script src="scripts/jquery.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="scripts/angular.js"></script>

    <script type="application/javascript"></script>

我想在这一行附加一个参数:

<td onclick="window.location='#showemp/{{ dispensercategory.dispenser.iddispenser }}'"> {{ dispensercategory.dispenser.iddispenser }}</td> 

我想将 {{dispensercategory.dispenser.iddispenser }} 的值附加到 URL #showemp/。但这样它不会读取 Angular 变量的值，而是读取 url 这样一个唯一的字符串:

http://localhost:8080/FoodDrinkDispener/fddWebapp/fixed_admin.html#/showemp/%7B%7B%20dispensercategory.dispenser.iddispenser%20%7D%7D

看这个:

当我点击“1”的单元格时，我想要转到“#/showemp1”。 怎么解决呢？

Answer 1

使用$location service而不是window.location 这可以通过几种方式实现

ng-click="$location.path('#showemp/').search({your param: 'dispensercategory.dispenser.iddispenser'});"

或使用

 ng-click="$location.path('#showemp/'+{{dispensercategory.dispenser.iddispenser}})"

或

在 Controller 中

yourApp.controller('myController', function($scope, $location){
    $scope.changePath= function(param){
        $location.url('/#showemp/'+param);
        //optional use if not work $scope.$apply();
    };
});

HTML 格式

ng-click="changePath(dispensercategory.dispenser.iddispenser)"