Question

我有一个项目，你在一个处方集中写一个笔记。然后，您将该注释提交到信息容器中（现在它只是一个用于测试目的的数组，但它以后打算成为数据库）。

处方包含以下控制器：

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>

这是我的指示（我不认为它真的需要，但以防万一）：

app.directive('formulario', [function() {
  return {
    restrict: 'E', // C: class, E: element, M: comments, A: attributes
    templateUrl: 'modules/formulario.html',

  };
}]);

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

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

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

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

    return data;
});

...我在笔记控制器的这一部分收到它：

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-model绑定。这很好用，好的。但是当我提交表单时，新的注释对象会一直绑定到表单（所以如果我删除表单文本，则注释会显示为空白，如果我写了一些内容，它会自动更新预览注释和新注释），它们之间没有任何关系。新的音符在屏幕上动态显示，不应该与任何东西绑定。

我做错了吗？一些帮助会非常好！

Answer 1

你忘记了一些非常重要的事情。内存地址。所以，这个想法是这样的：假设$scope.formData位于 123123 的地址中。您首先创建一个指向 123123 的temp var，然后将其发送到服务，该服务将相同的地址 123123 添加到data.data。< / p>

然后在你的第二个控制器中你说：嘿，我想使用你data.data SubmitService（你的 123123 中的数据）。

现在，当您再次修改$scope.formData时，您正在更新 123123 中的所有内容以及＆＃34;查找＆＃34;进入该地址将会更新。

这是一个粗略的想法。简单来说，你可以在任何地方修改同一条信息。

请在此处查看：http://plnkr.co/edit/zcEDQLHFWxYg4D7FqlmP?p=preview

正如AWolf建议的那样，为了解决这个问题，你可以像这样使用angular.copy：

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

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

1 个答案: