Question

友..

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

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

<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失去了它的值。

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

我在这里做错了什么？

Answer 1

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

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

Answer 2

其他人已经解释了在更改路线时创建新控制器（和$ scope）这一事实。另请注意，当promise被解析时，$ scope.employees将异步填充。可能发生的是在解析promise之前调用getSingleEmployeeDetails（），因此employees数组为空。

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

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

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

另请参阅Should services expose their asynchronicity?以获取有关如何在服务中存储数据的示例。

Angularjs范围不保留价值

2 个答案: