2

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

该项目对象如下所示:

{   // 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 对象工厂(例如,公司、项目)。这些工厂被注入到负责编辑每个对象的控制器(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 对象?还是我坚持使用hack,因为问题不依赖于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 的各种方法来填充所有内容。

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

4

1 回答 1

0

好的,所以我确实是这样解决的:

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

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

因为我有点挣扎(并且文档似乎没有我希望的那么清晰),所以这是我使用的选择:

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

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

随意提出想法或提出我可能忽略的任何疑虑或错误,或提供新的答案!

于 2012-12-09T15:29:08.130 回答