2

Boa noite Tenho esse método

$scope.register_popup = function(id, name)
        {

            for(var iii = 0; iii < popups.length; iii++)
            {   
                //already registered. Bring it to front.
                if(id == popups[iii])
                {
                    Array.remove(popups, iii);

                    popups.unshift(id);

                    $scope.calculate_popups();


                    return;
                }
            }               

            var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ name +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:;" ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';

            document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + element;  

            popups.unshift(id);

            $scope.calculate_popups();

        }

ou seja, tenho uma div criada dinamicamente. Reparem nessa linha:

element = element + '<div class="popup-head-right"><a href="javascript:;" ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';

no ng-click, chamo mais um método, que no caso seria esse:

$scope.close_popup = function(id)
        {
            for(var iii = 0; iii < popups.length; iii++)
            {
                if(id == popups[iii])
                {
                    Array.remove(popups, iii);

                    document.getElementById(id).style.display = "none";

                    $scope.calculate_popups();

                    return;
                }
            }   
        }

Só que nada acontece, mesmo que eu coloque um console.log nesse método nao me aparece nada, creio que seja pelo fato de ser criado dinamicamente. Como posso resolver isso?

1
  • Ola Daniel, acho que estou entendendo o que voce esta querendo fazer no codigo acima, mas infelizmente voce esta fazendo no lugar errado. A melhor forma pra voce criar esse elemento dinamicamente vai ser voce criar uma DIRECTIVE. Dessa forma vai ser bem mais simples voce passar o template HTML que deve ser utilizado e tambem muito mais simples de fazer o "bind" do click no elemento. Se voce criar um Plunker ou JSFiddle com o resto do codigo eu posso te ajudar. Commented 15/05/2015 às 10:54

2 Respostas 2

1

Monte o seu código utilizando o $compile.

var element = $compile("<button type='button' id='btnTeste' ng-click='teste()'>Teste Click</button>")($scope);

0

Isso acontece, por que utilizando o .innerHTML você está apenas vinculando no html um código string, porém não está "atualizando/vinculando" os eventos com o DOM, para que isso aconteça eu sugiro a solução abaixo.

Crie a diretiva no seu codigo.

myApp.directive('dynamic', function ($compile) {
  return {
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        if (!html) {
            return;
        }
        ele.html((typeof(html) === 'string') ? html : html.data);
        $compile(ele.contents())(scope);
      });
    }
  };
});

no seu html adicione.

<div data-dynamic="variavel"></div>

No seu controller onde você está fazendo.

    var element = '<div class="popup-box chat-popup" id="'+ id +'">';
    element = element + '<div class="popup-head">';
    element = element + '<div class="popup-head-left">'+ name +'</div>';
    element = element + '<div class="popup-head-right"><a href="javascript:;" ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';
    element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';

    document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + element;  

substitua para.

        var element = '<div class="popup-box chat-popup" id="'+ id +'">';
        element = element + '<div class="popup-head">';
        element = element + '<div class="popup-head-left">'+ name +'</div>';
        element = element + '<div class="popup-head-right"><a ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';
        element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';

 $scope.variavel = element;  

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 .