在 Angular.js 中连接模型答案

【问题标题】：Connect Models in Angular.js在 Angular.js 中连接模型
【发布时间】：2013-01-23 21:23:49
【问题描述】：

我刚刚开始使用 Angular.js，我不确定如何将两个“模型”“链接”在一起。我的 index.php 文件中有以下代码

<div ng-controller="AccountCtrl">
    <h2>Accounts</h2>
    <ul>
        <li ng-repeat="account in accounts">
            <span>{{account.id}} {{account.ownedBy}}</span>
        </li>
    </ul>
</div>
<div ng-controller="TransactionCtrl">
    <h2>Transactions</h2>
    <ul>
        <li ng-repeat="transaction in transactions">
            <span>{{transaction.id}} {{transaction.timestamp}} {{transaction.amount}} {{transaction.description}} {{transaction.account}}</span>
        </li>
    </ul>
</div>

还有下面的js

function AccountCtrl($scope, $http) {
    // initialize Data
    $http({
        method:'GET', 
        url:'http://api.mydomain.ca/accounts'
    }).success(function(data, status, headers, config) {
        $scope.accounts = data;
    }).error(function(data, status, headers, config) {
        alert('Error getting accounts. HTTP Response status code: '+status);
    });
}
function TransactionCtrl($scope, $http) {
    // initialize Data
    $http({
        method:'GET', 
        url:'http://api.mydomain.ca/transactions'
    }).success(function(data, status, headers, config) {
        $scope.transactions = data;
    }).error(function(data, status, headers, config) {
        alert('Error getting transactions. HTTP Response status code: '+status);
    });
}

所以在我的示例中，每个账户都会有很多交易，我想在我的账户控制器中添加一个函数来根据交易计算账户的余额，但我不知道该怎么做，因为它们是不同的$范围。

有没有办法在 Angular 中执行此操作，或者当我获得帐户时，我是否必须在我的 JSON 响应中从服务器返回“链接”交易信息？

【问题讨论】：

标签： javascript frameworks model angularjs

【解决方案1】：

我猜account 持有transactions，对吧？那我猜，你可以创建一个service 来管理账户/交易数据。将此服务注入到两个控制器中。

module = angular.module('app', []);

module.factory('accountService', function($http) {
  var obj = {
    // handles http communication to/from server.
    // also has methods/getters/setters for data manipulation, etc.
  };
  return obj;
});

module.controller('AccountCtrl', function($scope, accountService) {
   // access accountService for the view-databind.
});

module.controller('TransactionCtrl', function($scope, accountService) {
   // access accountService for the view-databind.
});

【讨论】：

【解决方案2】：

由于您同时发出两个 http 请求，我将更改我的服务以将交易作为帐户对象的属性返回。然后它将是一个服务器调用，开销更少，并且您的数据将采用您需要的格式。我认为您对最后一个问题的想法是正确的。

使用 Angular 也是不错的选择。如果您还没有找到它们，John Lindquest 在egghead.io 发布了一组很棒的视频。

【讨论】：