Problems with modals

Question

Problems with modals

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm using the template in Angular. I need to open a page within a modal, for this 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 conforms to the image, does not initialize the components, and gives a lot of errors, how could I solve this?

javascript html angularjs modal

asked by anonymous 04.11.2016 / 08:52

2 answers

Help with using the igraph library and timeorded in R JSF + DDD: Is it correct to use the domain entities within the managed bean?

score 0 · Answer 1

I think your solution is a bit wrong.

As mentioned, since you are using angularjs, a framework that also uses jQuery in your code, there are certain points that you should be aware of when using them simultaneously.

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

jQuery can be best executed without interfering with the performance of 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 since it is used angular, would be to use some lib / module or something that is written in angularjs so as not to have any kind of interference or some possible x error.

Possibly something is outside of the angle 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 library js, your template should follow the same pattern that angular uses to render it within the modal and display the data correctly.

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

LumX is an interface design framework based on google material and also written in angularjs.

link

The answer is a bit big, but I hope I have helped.

score 0 · Answer 2

I've been using jquery since angular js , angular controls the DOM in a much more intuitive way.

In the modal example I usually use w3.css which is pure CSS, and with AngularJS I define when the modal opens through a ng-class that toggles 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>