Question

我在AngularJS学习路径上又提出了一个问题。

在这个社区的帮助下，我能够达到我想要完成的更简单的版本。基本上，将数据添加到一个地方的工厂功能，并能够在App的不同位置渲染到模态。 JSFiddle

然而，虽然我能够在较小的版本上使用它，但是我无法在真正的＆＃34;应用

应用程序的想法很简单：一些管理员用户可以创建一系列表单，App用户可以通过填充和遵循批准流程来通过它们来请求填充。

应用程序中有一部分可以编辑表单，只有管理员用户可以访问，而常规用户填充表单时应用程序的其他部分。有一个表单工厂函数，它包含并封装模块对表单的使用，并临时存储一个表单的数据（直到我实现存储在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();
        }
    };
});

虽然渲染表单非常相似，但是迭代组件并逐个渲染。

我无法弄清楚的部分是为什么这些指令在我可以编辑表单而不是模态的页面上使用它们时工作得非常好。在那个编辑页面上，我将指令放在控制器之外，就像我在模态上做的那样。

因此，在该示例中，在该编辑页面中，指令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对象，因此{{1}将返回不同的数组。所以在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;
    }

AngularJS：从工厂函数检索数据到指令

1 个答案: