2

estou aprendendo AngularJS e tenho um problema que não consigo solucionar.

Tenho uma função dentro de um controller que está dentro de um módulo. Essa função é responsável por montar um elemento accordion com vários itens:

$scope.montaAccordion = function(dados){
        var elemento = "";
        for(var i=0; i < dados.length; i++){
            elemento += "<div class='accordion-group' indice='collapse"+dados[i].AtributoVariacao.id+"'>";
            elemento +=     "<div class='accordion-heading'>";
            elemento +=         "<a class='accordion-toggle' data-toggle='collapse' data-parent='#sidebar-accordion' href='#collapse"+dados[i].AtributoVariacao.id+"'>";
            elemento +=             "<i class='icon-reorder'></i>"+dados[i].Variacao.variacao+":: "+dados[i].AtributoVariacao.atributo;
            elemento +=         "</a>";
            elemento +=     "</div>";
            elemento +=     "<a href='#' class='bt-del-atributo' style='float:right; margin: -33px 7px 0 0;'>";
            elemento +=         "<i class='fa fa-times fa-2x'></i>";
            elemento +=     "</a>";
            elemento +=     "<div id='collapse"+dados[i].AtributoVariacao.id+"' class='accordion-body collapse'>";
            elemento +=         "<div class='accordion-inner'>";
            elemento +=             "<div class='control-group' data-fieldname='preco-diferenciado' style='padding:0;'>";
            elemento +=                 "<div class='controls'>";
            elemento +=                     "<label class='control-label'>Esta variação possui um preço diferenciado?</label>";
            elemento +=                     "<input type='text' name='preco-diferenciado-"+dados[i].AtributoVariacao.id+"' class='span12' value='' placeholder=''>";
            elemento +=                 "</div><br />";
            elemento +=                 "<button type='button' class='btn btn-info' ng-click='salvaPrecoDiferenciado("+dados[i].AtributoVariacao.id+")'>Salvar</button>";
            elemento +=             "</div>";
            elemento +=         "</div>";
            elemento +=     "</div>";
            elemento +="</div>";
        }
        $('#sidebar-accordion').html(elemento);
    }

Mas no trecho:

elemento += "<button type='button' class='btn btn-info' ng-click='salvaPrecoDiferenciado("+dados[i].AtributoVariacao.id+")'>Salvar</button>";

O ng-click não funciona. Acredito que seja algum problema no escopo, ou onde insiro essa função salvaPrecoDiferenciado().

Declarei a função no mesmo controller:

$scope.salvaPrecoDiferenciado = function(id){
     alert(id);
}

e não funcionou. Alguém pode me ajudar?

4
  • Quando você clica no botão aparece algum erro no console do navegador?
    – adelmo00
    Commented 3/11/2015 às 16:00
  • Vc precisar usar um $compiler para carregar esse html dinamico. Vou montar um exemplo e já posto Commented 3/11/2015 às 16:10
  • @EmirMarques nesse caso dele não seria melhor colocar o código na página html e usar o ng-repeat?
    – adelmo00
    Commented 3/11/2015 às 16:16
  • Pode ser também @adelmo00. Eu também prefiro essa abordagem. Estou partindo do principio que isso por algum motivo alheio não atende Commented 3/11/2015 às 16:22

1 Resposta 1

2

Você precisa usar o $compile. Veja o exemplo abaixo:

var app = angular.module("App", []);

app.controller("DemoController", function($scope, $compile){
    $scope.montaAccordion = function(){
        var elemento = "";
        for(var i=0; i < 5; i++){
            elemento += "<input type='button' ng-click='clickItem()' value='Teste: " + i + "'>";
        }
        $('#sidebar-accordion').html($compile(elemento)($scope));
    };
    
    $scope.clickItem = function(){
        console.log("Teste...");
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div ng-app="App" ng-controller="DemoController" ng-init="montaAccordion()">
  <div id="sidebar-accordion" />
</div>

2
  • Deu certo, obrigado! =) Mas me explique, para que serve o $compile? Commented 3/11/2015 às 19:17
  • o $compile serve para vc dar bind em elementos que estão em formato de string. Além disso ele associa um $scope especifico para o conteúdo presente nessa string. Falando de forma mais direta, ele vai fazer o angular entender os atributos que estejam presente nessa string. Entre esses atributos estão os eventos de click, change etc... Commented 3/11/2015 às 19:22

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 .