friends..
for understanding of how routing works in angular have created simple application. application has 2 pages: 1. first page display rows of employee table. upon clicking on particular row, second page display form details of employee.
the list displayed on first page uses following code:
<table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname}} - {{employee. address}}</td> <td><span ng-click="getsingleemployeedetails(employee.id)">edit</a></td> </tr> </table> i using same controller both these pages , controller looks below:
function employeectrl($scope,$http,employee,$location,$routeparams) { // employee details var data; employee.query().then(function(_data) { $scope.employees = _data.data; }); // single employee details $scope.getsingleemployeedetails = function(id) { $scope.employee = scope.employees[id]; $location.path('/editemployee/' + id); } } however issue facing when code gets routed /editemployee/1
reason $scope.employees looses values.
in other words form never gets populated employee details.
what doing wrong here ?
this has scoping. employees loaded employeectrl when instantiated. once perform routing event in getsingleemployeedetails() causes different controller load different $scope. $scope separate $scope inside employeectrl. 1 easy way around let employeectrl handle functionality of loading/displaying employees , single employee without routing new controller. pros here makes easier share information, , don't have reload single employee information when user clicks on single employee because can share information more easily. con don't button navigation navigate between selections of single employees.
the other option let singleemployeectrl reload information when navigates. pro button access again, con load information twice (once loading full list, , twice loading employee information again). allows user bookmark single employee records, bookmarks things anymore?
Comments
Post a Comment