AngularJS : Retrieving data to a directive from a factory function

Question

Here I come again with one more question on my AngularJS learning path.

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. 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).

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.

<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

  <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

.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:

[{"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 ?

Answer 1

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. So in your 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;
    }