Tenho um modal que possui um controller "userCtrl". Eu chamo todos os scripts no carregamento da página (final do body), porém, os modais, eu carrego dinamicamente a partir do momento que o usuário clicar no botão, usando a função $.get()
eu carrego o modal e faço um $(#modal).modal('show')
.
O problema é que, o ng-controller que está contido no modal que é carregado quando o usuário clica não funciona, é como se o controller não funcionasse, não executa nada que esteja dentro desse controller no modal, como se ele não fosse encontrado.
- Por que isso pode ocorrer?
- Tem alguma maneira de consertar isso?
- Gostaria de saber se isso ocorre porque o script do controller é carregado antes do elemento que contém o ng-controller.
Função que carregar o html do modal onde está incluso o ng-controller
showModal = function(id, path) {
$.get(path, response => {
$(".modals").append(response);
$(id).modal('show');
$(id).on("hidden.bs.modal", () => {
$(id).remove();
});
});
}
Trecho do modal
<div class="modal fade" id="mdCreateGrupos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" ng-controller="gruposCtrl" ng-init="init()">
Trecho do controller
app.controller("gruposCtrl", function($scope, $gruposService, $compile) {
$('#mdCreateGrupo').on('show.bs.modal', function (event) {
$(".alert").remove();
$("#textGrupo").val("");
});
$scope.init = function() {
console.log('inicio');
}
Tudo estava funcionando corretamente até eu usar a função $.get, antes eu estava usando o ng-include, porém estava muito verboso porque era um ng-include para cada modal, agora eu fiz essa função que funciona para qualquer modal.