Attach a parameter from Angular after a path in window.location

Question

I have an html file that show a dynamic table using an Angular script:

<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>

I want to attach a parameter in this line:

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

I want to attach the value of {{ dispensercategory.dispenser.iddispenser }} to the url #showemp/. But in this way it doesn't read the value of Angular variable, but it read url such a unique string:

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

Look this:

When I click on the cell of "1", I want to go to "#/showemp1". How can I solve it?

Answer 1

Use $location service instead of window.location This could be achieve in few ways

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

or use

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

or

In controller

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

In HTML

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

Answer 2

You could use the ng-href directive, and do the following:

<td>
    <a ng-href="#showemp/{{ dispensercategory.dispenser.iddispenser }}"> {{ dispensercategory.dispenser.iddispenser }} </a>
</td>