javascript - 如何将 javascript 对象链接到它的 angularsjs 资源

Question

注意:我的应用程序要复杂得多，但我正在剥离不需要关注问题核心的所有内容。该(简化的)应用程序允许用户编辑有关项目的数据，例如，向其中添加随机数量的公司，每个公司都合格(制造商、分销商、批发商等)。

那个项目对象看起来像这样:

{   // item
    Name: "name",
    CreationDate: "some date",
    // etc...
    Companies: [{ 
        Type: "Manufacturer",
        Company: {
            ID: "some random id",
            Name: "name of the company"
            // other bunch of stuff
            }
        // other bunch of stuff
        }, { 
        Type: "Distributor",
        Company: {
            ID: "some other random id",
            Name: "name of an other company"
            // other bunch of stuff
            }
        // other bunch of stuff
        }]
    // other bunch of stuff
}

在我的 angularjs 应用程序中，我有各种 $resource 对象工厂(例如，公司、项目)。这些工厂被注入(inject)到负责每个对象的版本的 Controller (CompaniesController、ItemsController 等)中。

现在，当我编辑一个项目(我在数据库中手动创建的)时，我将该项目作为资源对象(这是预期的)并将该项目的所有公司作为一个对象数组。

我还对所有可用公司进行了不同的调用，将其作为一组资源对象(也是预期的)。

请注意，公司对象的结构在这两种情况下完全相同(因为它们实际上是相同的对象)。

我的问题是该项目的类别是纯 JS 对象，绝不会链接或映射到相应的 angularsjs 资源，因此当我尝试编辑现有的链接公司时，angular 找不到它。这似乎是合乎逻辑的，因为一方面我有一个“基本”js 对象，另一方面我有一个 $resource 对象。

页面上的版本实际上是由一个用于公司类型的自由文本字段和一个包含所有公司的下拉列表(选择)组成的。我首先尝试在选择上使用 ng-options，然后使用以下方法解决它:

<select name="ddlc_01" id="ddlc-01"> 
    <option value="">-- Choose --</option>
    <option ng-selected="company.ID == editedCompany.Company.ID" ng-repeat="company in companies" value="{{company.ID}}">{{company.Name}}</option>
</select>

但我宁愿不那样破解它。

那么有没有办法将 js 对象“链接”或“附加”到匹配的 $resource 对象？或者我是否因为问题不依赖于 angularjs 而是依赖于 javascript 引擎比较对象的方式而陷入困境？

我已尝试获取该项目的所有公司并将其替换为:

var item = Items.get({ verb: $routeParams.ID }, function (result) {
    var newComps = [];
    for (var i = 0; i < item.Companies.length; i++) {
        var ct = item.Companies[i];
        ct.Company = new Companies(ct.Company);
    }
});

但尽管它已成为 $resource 对象，但它仍然与公司请求中的对象不匹配。

我一直在考虑但尚未尝试的另一种选择是“链接”请求，并根据对象 ID(我的对象的一个​​字段)从公司中搜索匹配的资源并将其替换为那些对象。我不喜欢该选项的是它会增加页面的加载和构建时间，因为实际上已经调用了 4 次 API 的各种方法来填充所有内容。

对问题的任何想法、建议或答案表示赞赏:)

Answer 1

好吧，我确实是这样解决的:

1. 创建了一个计数器来获取当前未答复的请求
2. 添加了一个传递给每个对象.query() 的函数“asyncCallback”
3. 在该方法中，递减计数器。
4. 如果计数器等于 0，则搜索项目公司并用它们的“真实”值替换它们

它使我能够避免异步调用的链接，同时保持相同级别的灵 active (如果不是更高的话)。此外，如果需要，它可以很容易地转换为卡住尚未“重新绑定(bind)”的区域，这样用户就不会在 UI 中做出错误的选择。

因为我对此有点费力(而且文档似乎没有我希望的那么清晰)，这是我使用的选择:

<select ng-options="c as c.Name for c in companies" ng-model="editedCompany.Company"> 
    <option>-- Choose --</option>
</select>

这意味着我使用 c.Name 作为公司的代表，但它的值实际上是公司本身(不要相信这个值，它只是一个允许 angular 处理它的假值)。

请随时提出想法或提出我可能忽略的任何疑虑或错误，或者提供新的答案!