Question

在对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: ""
}

问题当然是视图不会因为更改的模型而改变。

有些观点：

代码之前正在工作，当我没有对这两个函数进行任何更改时，它突然停止工作。（我显然在其他地方做了其他改变，破坏了这个功能）。
我尝试过使用$scope.$apply()和$scope.$evalAsync()，但无济于事。前者导致错误说$scope.$apply()已经在运行，而第二个似乎没有任何区别（尽管没有错误）。
我知道我在setupUomMapping函数中动态插入元素不是“Angular方式”，但我被迫这样做，因为包含所有这些东西的形式是由第三方图书馆，我无法控制的东西。所以如果答案集中在如何解决这个特定的问题，我会很感激。

感谢您的时间和帮助。

Answer 1

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

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

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

当我在AngularJS中更改模型时，如何才能更新视图？

1 个答案: