javascript - 如何使用 Angular 从 ListView 模板传递数据以编辑 View 模板

Question

我正在使用 Angular 和 ASP.NET Web API 创建一个 SPA。我使用 ui-router 模块。我有一个 ListView ，显示带有编辑按钮的客户，我想通过该按钮将 customerId 传递到 editCustomerController.js 以用于从网络获取要编辑的客户API。我似乎无法理解这一点。

CustomerView.html

<tr ng-repeat="customer in vm.customers">
  <td>{{$index + 1}}</td>
  <td>{{customer.identificationNumber}}</td>
  <td>{{customer.surname}}</td>
  <td>{{customer.otherName}}</td>
  <td>
     <a ui-sref="customerEdit" ng-click="vm.setSelectedCustomerId(customer.id)">
      <i class="fa fa-pencil-square-o"></i>
     </a>
  </td>
 </tr>

如何从此模板将 customerId 传递到 editCustomerController.js？

Answer 1

正如@New Dev 所指出的，我能够使用 ui-sref="customerEdit({ id: customer.id })"解决我的问题。将 CustomerView.html 编辑链接更改为

<td>
   <a data-ui-sref="customerEdit({ id: customer.id })">
     <i class="fa fa-pencil-square-o"></i>
   </a>
</td>

客户编辑状态

$stateProvider
     .state("customerEdit", {
         url: "/customers/edit/:id",
         templateUrl: "/editCustomerView.html",
         controller: "editCustomerController"
      })

editCustomerController.js

function editCustomerController($stateParams, customerResource) {
    var vm = this;
    vm.editableCustomer = {};
    vm.selectedCustomerId = $stateParams.id;

    customerResource.get({ id: vm.selectedCustomerId },
        function(data) {
            vm.editableCustomer = data;
            ...
        });
};