与 angularjs 模态的范围共享问题

Question

我正在尝试让 angular bootstrap UI 的模态对话正常工作。除了呼叫者屏幕上也存在的几个字段外，一切正常。当我在模态上更新它们的值时，这些字段也会更新。例如，如果我在来电者上显示姓名字段并单击它进行编辑，则编辑后的文本也会出现在来电者屏幕上。虽然我为模态创建了单独的控制器，但它仍然共享相同的范围。我已经为调用者控制器尝试了 "controller as" 语法，但我仍然遇到同样的问题。我不能将控制器作为模态的语法，因为我不知道是否有办法做到这一点。如果你们中有人知道如何解决这个问题，那将是一个很大的帮助！这里是 plunkerhttp://plnkr.co/edit/glcw3bjPVPDesq05lg47?p=preview

Answer 1

发生这种情况是因为您将人物对象直接传递给模态控制器。而是通过将原始对象复制为以下方式来创建新的人员对象：

    resolve: {
      person: function() {
        // return selectedPerson;
        return angular.copy(selectedPerson);
      }
    }

然后 return 在 "ok" 单击

时将此副本复制给呼叫者

$scope.ok = function() {
  $modalInstance.close($scope.person);
};

$scope.cancel = function() {
  $modalInstance.dismiss('cancel');
};

然后调用者就可以得到了

  modalInstance.result.then(function(personModified) {
    $log.info('personModified = '+ personModified.name + ' Finished at: ' + new Date());
  }, function() {
    $log.info('Modal dismissed at: ' + new Date());
  });

因此，如果单击 "cancel" 按钮，您只需丢弃复制的人。

与 angularjs 模态的范围共享问题

Issue in scope sharing with angularjs Modal

modal-dialog

twitter-bootstrap

angularjs

angularjs-scope