It's possible to nest several angular scripts?

Question

I'm trying to nest two scripts, but the second one that opens and closes, closes the first one instead of the second one I open.

I'm using AngularJS in the frontEnd.

The structure is as follows:

                    <list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
                               resolve="{openPaisModal: ctrl.openPaisModal,
                                         openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
                                         paisService: ctrl.paisService}"
                               required="true"
                               template-url="libro.edicion.html">
                    </list-form>

                    <script type="text/ng-template" id="edicion.agente.html">
                        <uib-accordion close-others="oneAtATime" class="col-sm-12">
                            <div uib-accordion-group class="panel-default" is-open="element.desplegado"
                                 heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">

                                <div class="row">

                                    <div class="col-sm-10 col-sm-offset-1">
                                        <div class="form-group">
                                            <label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
                                            <input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">

                                    <!-- Inside this row I'm trying to create another list-form and its script -->*

                                </div>

                            </div>
                        </uib-accordion>
                    </script>

Is there any way to do that?

EDIT 1

I'm not trying to load scripts asynchronously. Added my solution with the code.

No, you cannot do that. Can you describe what actual problem you're facing because putting a script inside of a script sounds like the wrong answer to that problem. — takendarkk, Sep 04 '17 at 11:27
Possible duplicate of [load scripts asynchronously](https://stackoverflow.com/questions/7718935/load-scripts-asynchronously) — lumio, Sep 04 '17 at 11:33
It's not a duplicate @lumio, are different questions. Thank you all. — Hugo L.M, Sep 04 '17 at 12:02
I don't understand the negatives in the question. I think it's formulated with the information that was needed. I would like some feedback on how to formulate it better. — Hugo L.M, Sep 04 '17 at 12:21
Edited question and title. You have reason, it probably wasn't as well explained as it could be. — Hugo L.M, Sep 04 '17 at 19:56

score 0 · Answer 1 · edited Sep 04 '17 at 11:34

0

No you can't do that.

You can merge the two script as single file, like: But you can copy the code from second script file and past the code inside of first script file, then you just call the first script file.

edited Sep 04 '17 at 11:34

Turnip

35,836
15
89
111

answered Sep 04 '17 at 11:31

Ramesh Rajendran

37,412
45
153
234

Hugo L.M · Accepted Answer · 2017-09-04T12:28:01.637

I was trying to do that:

                        <list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
                                   resolve="{openPaisModal: ctrl.openPaisModal,
                                             openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
                                             paisService: ctrl.paisService}"
                                   required="true"
                                   template-url="libro.edicion.html">
                        </list-form>

                        <script type="text/ng-template" id="edicion.agente.html">
                            <uib-accordion close-others="oneAtATime" class="col-sm-12">
                                <div uib-accordion-group class="panel-default" is-open="element.desplegado"
                                     heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">

                                    <div class="row">

                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="form-group">
                                                <label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
                                                <input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row">

                                        <!-- Inside this row I was trying to create another list-form and its script -->*

                                    </div>

                                </div>
                            </uib-accordion>
                        </script>

The solution was to create the list-form within the row and script at the same height as the previous one.

And simply call it up with the template-url from the list-form.

Thank you, everyone.

Why not creating a second component or using the component recursively? — lumio, Sep 04 '17 at 12:11
These are different entities in the API rest, different components and I also needed to be able to show the form to normalize the database in postgres. There are probably other solutions. But this one's working for me. Thank you very much for your opinions @lumio — Hugo L.M, Sep 04 '17 at 12:16

It's possible to nest several angular scripts?

2 Answers2