Search code examples
javascriptangularjsangular-directive

Creating a list and rendering with angular directives

I am doing a learning project for the MEAN stack, and I am really stuck at something which I need help.

On the real project, what I do is I have a Form creator were different components can be created and arranged according to the user needs, then directives similar to the used on this simplified example renders the from component by component and enable the user to populate it.

On this JSFiddle, as I mentioned, there is a simplified version where I use a similar approach to the one I want to use on my project.

My Logic is: I create a new array where all the values I input on the textbox are stored after a small processing on the format, then I have two directives that have access to a factory function where the data is stored, that loop trough all the items and render them one by one.

I can see that the factory function is working and create the set of data as I wanted to be.

Here is where the problems start:

I call the directive like this

<render-all-items></render-all-items>

the definition of this directive is

.directive('renderAllItems', function (DataServ) {
    return {
        restrict: 'E',
        scope: {},
        link: function (scope, elem, attrs) {
            scope.values = DataServ.currentTemplate.getAllItems();
        },
        template: '<div ng-repeat="item in values">{{item}}<render-item render="item"></renderItem></div>'
    };
});

This directive supposedly iterates the list of elements and render them one by one. The single Item render is working after a initial typo correction.

The output on the modal is:

[[
Item order = and item value =

]]
Item order = and item value =

And is always the same output, no matter how many items are on the array.

My main goal is easy: I should be able to add as many items I want using the textbox and then when I press the open modal, I should be able to see the list of elements rendered in the modal dialog.

I would really appreciate guidance on where I am doing it wrong to achieve the result I want.

Thanks in advance.

Solution

  • You have a typo on this line:

        <div><pre><render-item render="template.createTemplateItem(textBoxData)"></render-item></pre>

    Should be:

        <div><pre><render-item render="template.CreateTemplateItem(textBoxData)"></render-item></pre>

    This segment of code:

    Template.prototype.getAllItems = function () {
    //take a template item object and add it to 
    //the template items repository
    return JSON.stringify(this.items);
};

    is called once by your renderAllItems directive when it links:

    link: function (scope, elem, attrs) {
    scope.values = DataServ.currentTemplate.getAllItems();
},

    All changes to that template's items array are not reflected in the directive because you JSON.stringify'd the array.

    https://jsfiddle.net/urq3gu5o/