0

在对 AngularJS 应用程序中对模型进行更改后视图没有更新的类似问题进行了大量研究后，我提出了这个问题。由于我使用的是外部库，情况有些复杂angular-schema-form。

ediTradingPartner.outbound_uom_map我有一个对象值变量附加到angular-schema-form用于生成表单元素的调用范围。一个例子如下：

$scope.ediTradingPartner.outbound_uom_map = {
  CHARGE: "EA", 
  DAY: "DA", 
  KIT: "KT", 
  MONTH: "MO",
  SET: "ST"
}

加载表单时，上面的每个键值对都会生成一个输入字段，其标签设置为键，文本值设置为值。此外，我添加了一个输入字段和一个按钮，允许用户向对象添加新的键值对。执行此操作的代码如下：

$scope.setupUomMapping = function() {
    var addNewUOMButton = $('<button>', { text: "+", 'ng-click': "addNewUOM(new_uom_key)"}),
        newUomKey = $('<input>', { type: "text", 'ng-model': "new_uom_key", placeholder: "New key..."}).css('margin-right', '5px');

    var $el = $('<div>', { id: "addNewUOM" })
        .append(newUomKey)
        .append(addNewUOMButton)
    .insertAfter($('legend:contains("outbound_uom_map")'));

    $compile($el)($scope);
}

当用户在输入字段中输入内容并按下按钮时，将addNewUOM调用该方法，并将new_uom_key其作为参数传入。addNewUOM定义如下：

$scope.addNewUOM = function(new_uom_key) {
    if (!$scope.ediTradingPartnerModel.hasOwnProperty('outbound_uom_map')) {
        $scope.ediTradingPartnerModel.outbound_uom_map = {};
    }

    $scope.ediTradingPartnerModel.outbound_uom_map[new_uom_key] = "";
    console.log($scope.ediTradingPartnerModel.outbound_uom_map);
}

我想要发生的是将新键new_uom_key添加到范围变量$scope.ediTradingPartnerModel.outbound_uom_map以导致视图具有另一个输入字段，其标签为new_uom_key. 作为模型已更改的证据，如果我在输入字段中输入“YEAR”并按添加按钮，然后记录$scope.ediTradingPartnerModel.outbound_uom_map变量，我会得到以下值：

{
  CHARGE: "EA",
  DAY: "DA",
  KIT: "KT",
  MONTH: "MO",
  SET: "ST",
  YEAR: ""
}

当然，问题在于视图不会随着模型的变化而变化。

几点：

  1. 该代码以前可以工作，但在我没有对这些函数中的任何一个进行任何更改时，它突然停止工作。（我显然在其他地方做了其他改变，破坏了这个功能）。
  2. 我试过使用$scope.$apply()，$scope.$evalAsync()但无济于事。前者导致一个错误，说它$scope.$apply()已经在运行，而第二个似乎并没有真正产生任何影响（尽管没有错误）。
  3. 我知道像我在setupUomMapping函数中所做的那样动态插入元素不是“Angular 方式”，但我被迫这样做，因为包含所有这些东西的表单是由第三方库生成的我的控制力有限。因此，如果答案集中在如何解决这个特定问题上，我将不胜感激。

感谢您的时间和帮助。

4

1 回答 1

0

是否有 $scope.ediTradingPartnerModel.outbound_uom_map 绑定到的 html 对象？如果是这样，它应该会自动更新。

否则，$scope.setupUomMapping 函数是否负责构建视图？如果是这样，那么是什么导致它着火？如果您只在 DOM 的负载上构建视图，那么视图没有理由更新。每次视图需要更新时，您都需要调用此函数。

我的建议：摆脱视图的程序构建并创建利用 ng-repeat 的 html 模板。

于 2016-01-05T01:00:32.433 回答