javascript - 在 Angular JS 中从模型检索 id 到 Controller

Question

我有一个表，其中包含从我的 memberController 的 api 调用中检索的数据，该数据显示在 ng-repeat 内并且工作正常。

我需要成员(member)列表中的每个企业名称链接到单独的页面 (edit_form.html) 并显示 id 值，以便我可以将其与 api 调用一起传递以仅获取此特定的成员(member)详细信息。因此，我在编辑表单页面中添加了 ng-init，它在页面加载时调用函数 test_funct 并在那里检索每个人的 ID。不幸的是我无法检索函数内的 id 值。

HTML 模板

 <div class="page" data-ng-controller="memberController">
   <table>
      <thead >
        <tr>
            <th>Business Name</th>
            <th>Contact Name</th>
            <th>Trade Balance</th>
            <th>Cash Balance</th>
            <th>Telephone</th>
            <th>Account Number </th>
        </tr>
      </thead>
      <tbody>
        <tr data-ng-repeat="member in details | filter:search">
            <td><a href="#/pages/edit_form/" target="_blank" id="{{member.id}}" class="business_name">{{member.businessname}}</a></td>
            <td>{{member.person}}</td>
            <td>{{member.balance_trade}}</td>
            <td>{{member.balance_cash}}</td>
            <td>{{member.telephone}}</td>
            <td>{{member.accountnumber}}</td>   
        </tr>
      </tbody>
   </table>
  </div>

我有以下 Controller

function memberController($scope, $http, $cookieStore) {
    var token = $cookieStore.get('token');
    var conId = $cookieStore.get('Cont_Id');
    var exId = $cookieStore.get('ex_Id');
    var member_list = "http://www.vb.com/functions/member_list.html?exchangeid=" + exId +
                      "&contactid=" + conId + "&token=" + token;
    $http.get(member_list)
       .success(function(response) {
           $scope.details = response;
       });

    $scope.test_funct = function(id) {
       $scope.myid = id;
       alert($scope.myid); // getting undefined in alert, i expect the id(eg:1123)
    }
 }

edit_form.html

 <div class="page" data-ng-controller="memberController">
   <div class="panel-body" ng-init="test_funct()"></div>
 </div>

请在这方面协助我。提前致谢。

Answer 1

这里发生了两件事。

首先，您应该为不同的 View 分离 Controller ，因此最终会得到如下所示的结果:

<div class="page" data-ng-controller="memberController">
  <table>
    <!-- your whole big table here -->
  </table>
</div>

您的编辑表单如下:

<div class="page" data-ng-controller="editController">
   <div class="panel-body"></div>
</div>

请注意，您现在有两个不同的 Controller - “editController”和“memberController”。

第二个问题就变成了，如何将选定的 ID 从 ListView (“memberController”)传输到编辑 View (“editController”)。

有两种方法可以做到这一点。

首先，您可以使用 Controller 之间共享的服务:

.factory('SelectedId',function() {
   return {};
});

然后在您的“成员” View 中，您可以在单击时进行设置:

<a href="#/pages/edit_form/" target="_blank" id="{{member.id}}" class="business_name" ng-click="setId(member.id)">{{member.businessname}}</a>

注意 ng-click，它需要 memberController 中的函数和注入(inject)的服务:

.controller('memberController',function($scope,SelectedId) {
    $scope.setId = function(id) {
      SelectedId.id = id;
    };
});

当 editController 检索它时:

.controller('editController',function($scope,SelectedId) {
    $scope.id = SelectedId.id;
});

上述选项效果很好，特别是对于购物车之类的复杂事物。如果您所做的所有只是传递一个 ID，我会将其粘贴在 URL 中:

<a href="#/pages/edit_form/{{member.id}}" target="_blank" id="{{member.id}}" class="business_name">{{member.businessname}}</a>

因此 ID 是URL 的一部分。然后您可以在“editController”中检索它:

.controller('editController',function($scope,$routeParams) {
    $scope.id = $routeParams.member;
});

假设您正在使用 ng-route，并且您的路线如下所示:

    $routeProvider.when('/pages/edit_form/:member',{templateUrl:'/route/to/template.html',controller:'editController'});