Javascript 控制器之间奇怪的绑定持久性

我有一个项目，你在公式集中写一个注释。然后，您将该注释提交到一个信息容器中（现在它只是一个用于测试目的的数组，但稍后将成为一个DB）

处方集具有以下控制器：

app.controller('controlFormulario', ['$scope', 'SubmitService', function($scope, submitService) {

  $scope.formData = {
    "titulo":"",
    "texto":"",
    "fecha": new Date()
  };

    $scope.submit = function() {
        var temp = $scope.formData;
        submitService.prepForBroadcast(temp);


    }
// more things we don't need now

。。。它通过一个指令绑定到DOM的这一部分，并添加到其中：

<form ng-controller="controlFormulario as formCtrl">
        <div class="element">
          <div class="form-group" ng-class="{'has-error': formData.titulo.length > 50 }">
            <label for="inputTitulo">Título</label>
            <input type="titulo" class="form-control"  id="inputTitulo" ng-model="formData.titulo">
            <span ng-show="formData.titulo.length > 50" id="helpBlock" class="help-block">El título no puede exceder los 50 caracteres.</span>
          </div>
          <div class="form-group">
            <label for="inputTexto">Texto</label>
            <textarea class="form-control" id="inputTexto" ng-model="formData.texto"></textarea>

          </div>
          <div class="form-group">
            <label for="fecha">Fecha</label>
            <input type="fecha" class="form-control" id="fecha" ng-model="formData.fecha" disabled>
          </div>
          <div class="form-group" >
            <button  class="btn btn-primary" style="height:35px;width:100px;float:right;"  id="submit"
            ng-disabled="isDisabled()" ng-click="submit()">
            Enviar
            </button>
          </div>
        </div>
        <div class="note" ng-show="formData.titulo.length > 0">
         <div class="title" ng-model="formData.titulo" class="title">{{formData.titulo | limitTo:50}}</div>
         <div class="text" ng-model="formData.texto" class="text">{{formData.texto}}</div>
         <div class="date" ng-model="formData.fecha" class="date">{{formData.fecha | date}}</div>
        </div>

      </form>

我使用一个服务在前一个控制器和note控制器（控制数组的note对象）之间传递数据。这是服务：

app.factory('SubmitService', function($rootScope) {
    var data = {};

    data.prepForBroadcast = function(recvData) {
        data.data = recvData;
        this.broadcastItem();
    };

    data.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return data;
});

。。。我在我的note controller的这一部分中收到：

app.controller('noteController', ['$scope', 'SubmitService', function($scope, submitService) {

  var nc = this;

    $scope.$on('handleBroadcast', function() {
        nc.pruebaNota.push(submitService.data);
        $scope.formData.titulo = "";
        $scope.formData.texto= "";
        $scope.formData.fecha = new Date();
    });

// more things, the array, etc...

嗯。这应该是可行的，确实如此，但是奇怪的事情发生了：正如您所看到的，预览注释是用ng模型绑定到表单的。很好，好的。但是当我提交表单时，新的note对象将保持与表单的绑定（因此，如果我删除表单文本，注释将显示为空白，如果我写了什么，它将在预览注释和新注释中自动更新），而这两者之间没有任何关系。屏幕上动态显示的新便笺不应绑定任何内容

---

我做错什么了吗？有人帮忙真是太好了

你忘记了一些非常重要的事情。内存地址。因此，粗略的想法是：假设

$scope.formData

位于地址123123中。首先创建一个指向123123的

temp

var，然后将其发送到服务，服务将相同的地址123123放入

data.data

然后在你的第二个控制器中，你说：嘿，我想使用

数据。数据

（也就是你在123123中的数据）你有

SubmitService

现在，当您再次修改

$scope.formData

时，您正在更新该123123中的内容，所有“查看”该地址的内容都将被更新

这是一个粗略的想法。简单地说，您在任何地方都在修改相同的信息

请看这里：

正如AWolf建议的，要解决此问题，您可以使用

angular.copy

如下所示：

nc.pruebaNota.push(angular.copy(submitService.data));

---

对变量引用的良好回答/解释。但是解决这个问题会很好。您可以添加

angular.copy（…）

来创建变量的副本。请看一看这个更新。事实上，我太深入的解释，我忘记了。会更新的。你是对的，我有点线索，但问题是。。。我如何解决它？它将数组的最后一个对象绑定到表单，但这种绑定是无意的。我只想推送新的信息，如果我想添加一个新的信息。谢谢你，阿沃尔夫！这就解决了问题！美好的我有时会忘记我是如此，你需要具体的解决方案。我更喜欢教你问题是什么，这样你就可以自己解决它：P

nc.pruebaNota.push(angular.copy(submitService.data));