0

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.

2
  • Existem várias possibilidades. Incluir um trecho do código pertinente pode aumentar suas chances de receber uma resposta que resolva seu problema.
    – OnoSendai
    8/03/2018 às 16:35
  • Fiz algumas alterações. 8/03/2018 às 16:40

1 Resposta 1

0

Após ler esse issue no github: https://github.com/angular/angular.js/issues/1307
O usuário ceymard citou que

From what I understood in the end, the behavior of transclude is perfectly normal in that it creates its creates a new scope. So does ng-controller, which results in having them each have a distinct scope and thus not be able to interact together.

O que eu pensei em fazer então foi que toda vez que eu chamar um modal, eu usasse o $compile mandando o $scope para o response, feito isso, o código para abrir o modal ficou assim:

showModal = function(id, path) {
    $.get(path, response => {
        $(".modals").append($compile(response)($scope));
        $(id).modal('show');
        $(id).on("hidden.bs.modal", () => {
            $(id).remove();
        });
    });
}

Ou seja, toda vez q eu chamo o modal, eu compilo o response mandando o $scope fazendo-o funcionar corretamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .