javascript - ng-repeat 在模型更改后不更新

Question

我有两个 Controller ，一个用于我的表单，一个用于显示文档。
因此，我想在用户提交表单后更新记录列表，因此我创建了一个服务并在两个 Controller 之间共享了一个变量:

accountingApp.factory('sharedProperties', function () {
   var shareableData = []

   return {
      getProperty: function (property) {
         return shareableData[property];
      },
      setProperty: function(property, value) {
         shareableData[property] = value;
      }
   };
});

为了获取文档，我设置了服务中的 accDocs，然后将其附加到 vm.accDocs，然后在 html 上使用它，如 ng-repeat="accDoc in vm.accDocs"

function accDocsController(api, sharedProperties) {
  var vm = this;

  sharedProperties.setProperty("accDocs", api.getAccDocs(vm));
  vm.accDocs = sharedProperties.getProperty("accDocs");
}

在表单的 Controller 中，这是正在发生的事情:

vm.submit = function(vm) {
     if (vm.entryForms.$valid) {
        api.newAccDoc(...);

        console.log(sharedProperties.getProperty("accDocs")); // returns the actual array
        sharedProperties.setProperty("accDocs", null);
        console.log(sharedProperties.getProperty("accDocs")); // returns null
     }
  };

提交表单后，文档不会消失。我可以使用 ng-inspector 记录 vm.accDocs 并看到它仍然充满了对象。

我的问题在哪里？

Answer 1

发生这种情况是因为您正在替换该值。所以 vm.accDocs 绑定(bind)到原始值，而工厂现在包含新值。您可以通过将工厂状态数据包装在父对象中并绑定(bind)到该对象来轻松解决此问题。例如:

accountingApp.factory('sharedProperties', function () {
    var state = {
        shareableData: []
    };

    return {
        getState: function(){
            return state;
        },
        setProperty: function(property, value) {
            state.shareableData[property] = value;
        }
    };
});

然后不是直接绑定(bind)到您想要的值，而是绑定(bind)到状态本身，并使用 . 引用所需的值。例如:

vm.accDocsState = sharedProperties.getState();

在 HTML 中(可能不正确，因为我看不到你的代码，但希望你明白了):

ng-repeat="accDoc in vm.accDocsState.accDocs"