javascript - AngularJS : Retrieving data to a directive from a factory function

Question

我再次提出一个关于我的 AngularJS 学习路径的问题。

在这个社区的帮助下，我能够实现我想要完成的任务的更简单版本。基本上，将数据添加到一个位置的工厂函数，并能够在应用程序的不同位置渲染到模式。 JSFiddle

但是，虽然我能够使其在较小的版本上运行，但我无法使其在“真实”应用程序上运行。

该应用程序的想法非常简单:一些管理员用户可以创建一系列表单，应用程序用户可以使用这些表单通过填充和遵循审批流程来请求内容。

应用程序的一部分可以编辑表单，只有管理员用户有权访问，而应用程序的其他部分则在普通用户填充表单时进行。有一个表单工厂函数，它包含并封装模块对表单的使用，并临时存储一个表单的数据(直到我实现在 mongo 中存储的代码)。

模式很好地位于应用程序的开头，因为如果我将它放在代码的其他部分，则不会按预期工作，因为我也使用 Bootstrap 选项卡。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      <peek-form-directive></peek-form-directive>

      <render-form></render-form>
    </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

如你所见，我在模式框中有 2 个指令

  <peek-form-directive></peek-form-directive>
  <render-form></render-form>

peekFormDirective 是一个非常简单的指令，仅尝试检索数据并将其显示在浏览器上

.directive('peekFormDirective', function (FormServ) {
    return {
        scope: {},
        template: "<pre>{{formData}}</pre>",
        restrict: 'E',
        link: function (scope, elem, attrs) {
            scope.formData = FormServ.currentFormData.getAllItems();
        }
    };
});

虽然渲染形式非常相似，但是迭代组件并逐一渲染。

我无法弄清楚的是，如果我在可以编辑表单的页面上而不是在模式中使用这些指令，为什么这些指令可以完美地工作。在该编辑页面上，我将指令放置在 Controller 外部，就像在模态上所做的那样。

因此，例如，在该编辑页面中，指令 peekFormDirective 显示以下结果:

[{"order":1,"itemType":"title","data":{"order":0,"itemType":"","data":{},"label":"a"}}]

当我点击同一页面上的按钮打开模态框时，结果始终是一个空数组[]。

Factory function code The view where works

最初，我坚称这可能是作用域的问题，但我认为情况并非如此，因为无论如何我都是从工厂函数中检索数据。

为什么我可以在编辑页面上而不是模态上按预期使用指令？

Answer 1

你的问题是你的指令 <peek-form-directive>和<render-form>在 stdFormCtrl正在使用不同的 Template反对您模态中的一个，因此 getAllItems将返回不同的数组。所以在你的 stdFormCtrl :

    if (!$scope.template) {

        var templateList = [];
        // You were creating a new template here.
        // Comment this out and you'll see changes reflected in your modal
        // FormServ.currentFormData = new FormServ.Template(templateList);
        $scope.template = FormServ.currentFormData;
    }