[英]AngularJS : Retrieving data to a directive from a factory function
Here I come again with one more question on my AngularJS learning path. 在这里,我对AngularJS的学习道路又提出了一个问题。
With the help of this community, I was able to reach to a simpler version of what I want to accomplish. 在这个社区的帮助下,我得以实现自己想要完成的工作的简单版本。 Basically, adding data to a factory function on one place, and being able to render to a modal on a different place of the App.
基本上,将数据添加到一个地方的工厂功能中,并能够在App的另一个地方渲染为模态。 JSFiddle
JSFiddle
However, although I was able to make it work on the smaller version, I cannot make it work on the "real" App. 但是,尽管我可以使其在较小的版本上运行,但不能在“真实”应用程序上运行。
The idea of the App is very simple: some admins users can create a series of forms that would be used by the App users to request stuff trough them by populating and following an approval flow. 该应用程序的想法非常简单:某些管理员用户可以创建一系列表单,供应用程序用户使用,以通过填充并遵循批准流程来请求通过他们的东西。
There is a part on the application where form can be edited with only admins users having access, and other part of the App when regular users populate forms. 在应用程序的一部分中,只有具有访问权限的管理员用户才能编辑表单,而在普通用户填充表单时,应用程序的其他部分才可以编辑。 There is a form factory function that contains and encapsulate the use of the form by the modules and stores temporary the data for one form (until I implement the code for storing in mongo).
有一个表单工厂函数,包含并封装模块对表单的使用,并临时存储一个表单的数据(直到我实现将代码存储在mongo中)。
The modal is well at the beginning of the app, because did not worked as expected if I place it on other parts of the code because I am also using Bootstrap tabs. 该模式在应用程序开始时就很好用了,因为如果我将其放在代码的其他部分上并没有按预期工作,因为我也在使用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>
as you can see I have 2 directives inside the modal box 如您所见,我在模式框内有2个指令
<peek-form-directive></peek-form-directive>
<render-form></render-form>
peekFormDirective is a very simple directive that only tries to retrieve the data and show it on the browser peekFormDirective是一个非常简单的指令,它仅尝试检索数据并将其显示在浏览器上
.directive('peekFormDirective', function (FormServ) {
return {
scope: {},
template: "<pre>{{formData}}</pre>",
restrict: 'E',
link: function (scope, elem, attrs) {
scope.formData = FormServ.currentFormData.getAllItems();
}
};
});
while render form is pretty similar, but iterates the components and render one by one. 虽然渲染形式非常相似,但是迭代组件并逐一渲染。
The part I cannot figure out is why these directives are working perfectly fine if I use them on the page where the form can be edited and not in the modal. 我无法弄清楚的部分是,如果我在可以编辑表单的页面上而不是在模态页面上使用这些指令,为什么这些指令可以很好地工作。 On that edit page I placed the directives outside the controller as I would do on the modal.
在该编辑页面上,我将指令放置在控制器外部,就像在模态中一样。
So, in example, in that edit page the directive peekFormDirective displays the following result: 因此,例如,在该编辑页面中,指令peekFormDirective显示以下结果:
[{"order":1,"itemType":"title","data":{"order":0,"itemType":"","data":{},"label":"a"}}]
when I click on the same page the button to open the modal, the result it is always an empty array []. 当我单击同一页面上的按钮以打开模态时,结果它始终是一个空数组[]。
Factory function code The view where works 工厂功能代码 工作所在的视图
Initially, I tough that it could be an issue with scopes, but I don't think it is the case because I am retrieving the data from the factory function anyway. 最初,我坚信范围可能是一个问题,但我认为并非如此,因为无论如何我都是从工厂函数中检索数据的。
Why I can use the directives as expected on the edit page and not on the modal ? 为什么我可以在编辑页面上而不是在模式页面上使用预期的指令?
You problem is that your directives <peek-form-directive>
and <render-form>
in the stdFormCtrl
are using a different Template
object to the one in your modal and so the getAllItems
will return different arrays. 您的问题是
stdFormCtrl
中的指令<peek-form-directive>
和<render-form>
使用的是与模态中的Template
对象不同的Template
对象,因此getAllItems
将返回不同的数组。 So in your stdFormCtrl
: 因此,在您的
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.