Question

This Plunkr演示了我遇到的问题。

我有一个数组，它在一个对话框和它的父页面中显示。在对话框范围内修改该数组的工作正常，但是当我完全替换数组时，只能在对话框的范围内看到这些更改。那是为什么？

我的代码，以防Plunkr吃掉它：

angular.module('app', ['ui.bootstrap'])
  .controller('demoController', function($modal) {
    var vm = this;

    vm.message = 'Binding Problems';
    vm.list = [1,2,3];

    vm.modal = function() {
      $modal.open({
        controller: 'modalController as vm',
        templateUrl: 'modal.html',
        resolve: {
          list: function() {
            return vm.list;
          }
        }
      });
    };
  })
  .controller('modalController', ['$modalInstance', '$scope', 'list',
    function($modalInstance, $scope, list) {
      var vm = this;

      vm.list = list;
      vm.modalText = 'Modal Text';

      vm.cancel = function() {
        $modalInstance.dismiss();
      };
      vm.clear = function() {
        vm.list = []; // This does not propagate to the parent controller...
      };

      vm.add = function() {
        vm.list.push(4); // ...but this does.
      };

    }
  ]);

更新： Plunkr has been updated好的，我知道现在发生了什么，但不知道如何在我的代码中修复它。在我的实际代码中，我用AJAX调用的结果替换数据。我想在这种情况下我有几个选项，比如vm.list.length = 0然后push()从AJAX调用返回的每个项目，但这看起来非常低效。这通常是怎么做的？

Answer 1

而不是在clear()方法中重新创建数组，只需将其清空：

vm.clear = function() {
    vm.list.length = 0;
};

here是工作人员

Answer 2

这是因为您正在通过模式的范围用新的数组实例覆盖数组引用值帮助。

  vm.clear = function() {
    vm.list = []; // This does not propagate to the parent controller...
  };

而是清除数组，以便模态控制器的作用域仍然与父控制器的作用相同： -

 vm.clear = function() {
    vm.list.splice(0, vm.list.length); //or vm.list.length = 0;
  };

<强> Demo

根据您的实际问题进行更新： -

如果您确实希望共享需要通过覆盖刷新的数据，请从您的父级解析包含将从模式范围修改的数组的对象引用。

实施例： -

在您的父控制器中： -

  vm.data = {list : [1,2,3];};

并解决为： -

   resolve: {
      data: function() {
        return vm.data;
      }
    }

在你的模态中： -

注入数据并使用它： -

 .controller('modalController', ['$modalInstance', '$scope', 'data',
                       function($modalInstance, $scope, data) {

<强> Plnkr

这将确保两个控制器共享相同的底层对象引用，即使它的子属性引用发生更改，您将看到它反映在另一侧。

还有另一种方法可以将数据从模态传播到容器控制器使用模态承诺链。

链接虽然模态承诺可用作属性result

 $modal.open({
    controller: 'modalController as vm',
    templateUrl: 'modal.html',
    resolve: {
      list: function() {
        return vm.list;
      }
    }
  }).result.then(function(list){
    vm.list = list; //<-- refresh new list
  });

关闭模态时，使用模态关闭并传递数据： -

 vm.cancel = function() {
    $modalInstance.close(vm.list); //<-- Pass data
  };

<强> Plnkr

角度模型在更换时不会更新

2 个答案: