Problems with modals

Question

I’m using the template at Angular. I need to open a page inside a modal, so I used a code that was suggested by the template support:

<script type="text/javascript">

$('#conteudo2').on({
    'show.uk.modal': function () {
        $('#conteudo2').find('.modal-content').load("app/components/forms/regularView.html");
    }
});

HTML:

<div class="uk-modal" id="conteudo2">
   <div class="uk-modal-dialog">
   <div class="uk-modal-header">teste</div>
   <div class="modal-content"></div>
   </div>

However, the result is as the image, does not initialize the components, and gives a lot of errors, as it could solve this?

Answer 1

I believe your solution is a little wrong.

As mentioned, since it is using Angularjs, a framework that also uses jQuery in its code, there are certain points that should be aware when using them simultaneously.

Ideally, never use a jQuery inside a controller, and either being started directly on the page by changing the DOM.

jQuery can be better executed without interfering with the performance of the Angularjs when used within a directive within the LINK function and not within the controller.

I also believe that the best solution for you in this case if it is used angular, would be to use some lib/module or something that is written in Angularjs not to have any kind of interference or possible error x.

Possibly something is outside the Angular Digest cycle, or interfering directly causing the error.

Or the modal call, or the template.

I also believe that if the modal component is some angular js library, your template should follow the same pattern as the angular used to render it inside the modal and display the data correctly.

As already mentioned in the comments, one of the possible solutions would be used the most popular angula.bootstrap or maybe search for some other following google patterns as suggested by your screenshot.

Lumx is a framework for the design of interfaces based on google material and also written in English.

http://ui.lumapps.com/

The answer is a little big, but I hope I’ve helped.

Answer 2

Since I started using Angularjs stopped using jquery, angular controls the DOM in a much more intuitive way.

In the modal example I usually use the W3.css which is pure CSS, and with Angularjs I define when the modal opens through a ng-class alternating between display:none and display:block.

<link href="http://www.w3schools.com/lib/w3.css" rel='stylesheet' type="text/css"></link>
<style>.show{display:block}</style>
// a class="w3-modal" tem a propriedade display:none por defeito.    

<button ng-click="abrirModal=true">Abrir Modal</button>
<div class="w3-modal" ng-class="{'show':abrirModal}">
  <div class="w3-modal-content">
   <button ng-click="abrirModal=false">Fechar Modal</button>
   <h1>Conteúdo Aqui</h1>
  </div>
</div>