2

朋友们..

为了理解路由在 Angular 中的工作原理，我创建了一个简单的应用程序。此应用程序只有两页： 1. 第一页将显示员工表的所有行。单击特定行后，第二页将显示包含该员工详细信息的表单。

第一页上显示的列表使用以下代码：

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

我对这两个页面使用相同的控制器，这个控制器如下所示：

function EmployeeCtrl($scope,$http,Employee,$location,$routeParams) {
    // Get all employee details 
    var data;
    Employee.query().then(function(_data) {
      $scope.employees = _data.data;            
    }); 

    // Get Single Employee Details
    $scope.getSingleEmployeeDetails = function(id) {
      $scope.employee = scope.employees[id];
      $location.path('/editemployee/' + id);
    }   
}

然而，我面临的问题是，当代码
由于某种原因被路由到 /editemployee/1 时，$scope.employees 会失去它的值。

换句话说，表单永远不会填充员工详细信息。

我在这里做错了什么？

4

2 回答 2

0

这与范围界定有关。雇员在实例化时被加载到 EmployeeCtrl 中。一旦你在 getSingleEmployeeDetails() 中执行一个路由事件，导致不同的控制器加载不同的 $scope。一个与 EmployeeCtrl 中的 $scope 分开的 $scope。解决此问题的一种简单方法是让 EmployeeCtrl 处理加载/显示所有员工和单个员工的功能，而无需路由到新控制器。这里的优点是它更容易共享信息，当用户单击单个员工时，您不必重新加载单个员工信息，因为您可以更轻松地共享该信息。缺点是您没有返回按钮导航来在单个员工的选择之间导航。

另一个选项是让 SingleEmployeeCtrl 在导航时重新加载信息。优点是您再次获得返回按钮访问权限，但缺点是您加载信息两次（一次用于加载完整列表，两次用于再次加载员工信息）。这也允许用户为单个员工记录添加书签，但是谁再添加书签呢？

于 2013-07-15T16:00:53.580 回答
0

其他人已经解释了当您更改路由时会创建一个新控制器（和 $scope）的事实。另请注意，当 promise 解决时，$scope.employees 是异步填充的。可能发生的情况是在解决承诺之前调用 getSingleEmployeeDetails()，因此employees数组为空。

为了解决这个问题，我建议使用不同的架构。

您有两个视图/页面。Angular 中的每个视图通常都有自己的控制器。模型/数据通常存储在服务中，并且用于检索和操作这些模型/数据的 API 由服务提供/公开。控制器只是将所有东西粘合在一起：它注入它需要的服务，然后只引用关联视图需要的模型/数据。

因此，即使您的应用程序很简单，我还是建议采用上述方法：一个服务（存储您的员工对象）、两个控制器、两个视图。特别是，将query()调用放入您的服务中（以便在创建服务时调用一次）并将您的数据存储在服务中。服务 API 应该定义返回承诺的函数/方法，该承诺最终将包含所需的数据（员工列表，或仅一个）。控制器应该使用这些方法来获取对所需数据的引用。

另请参阅服务是否应该公开它们的异步性？有关如何在服务中存储数据的示例。

于 2013-07-15T18:16:58.637 回答