4

Possuo uma tabela que é renderizada dinamicamente quando se passa um array de dados pra ela. Eu tenho acesso aos dados de cada "row" da seguinte forma:

{
    "data": function (data, type, val, meta) {

        return "<div style=\"color:green;\">" + data.Valor + "</div>";
    }
}

Eu consigo colocar um trecho html ali, como está demonstrado, mas eu gostaria de colocar um progress-bar, e como no sistema já tenho o 'angular-ui' referenciado, queria usar a diretiva dele, mas colocar ali diretamente um

<uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></uib-progressbar>

ou compilar usando o $compiler do angularjs não está funcionando.

Como posso proceder?

1 Resposta 1

2
+25

Bem, vou deixar um exemplo com o $compile mesmo, dê uma olhada.

Exemplo com JSON e ngRepeat:

var app = angular.module('app', ["ngAnimate","ui.bootstrap"]);

app.directive('compile', function ($compile) {
  return {
    restrict: 'A',
    link: function ($scope, $element, $attrs) {
      var html = $attrs.compile;
      $scope.$watch($attrs.compile, function(html) {
      	$element.html(html)
        $compile($element.contents())($scope);
      });
    }
  };
});

app.controller('compileProgressBar', function($scope) {
  $scope.createProgressBar = function(value, max, type){
    return '<uib-progressbar class="progress-striped active" max="'+ max + '" value="'+ value + '" type="'+type+'"><i>'+ value + ' / '+ max + '</i></uib-progressbar>'
  }
  $scope.empresas = [
  	{name: "Empresa 1", progress: 80, typeBar: "sucess"},
  	{name: "Empresa 2", progress: 20, typeBar: "danger"},
  	{name: "Empresa 3", progress: 50, typeBar: "warning"}
  ];
})
.progress { 
  height: 20px;
}
.progress i{ 
  line-height: 20px;
}
.progress-bar { 
  transition: width 1s ease-in-out; 
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.1.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
<h2>Compile dynamic uiProgressBar in ngRepeat</h2>
<hr>
<div ng-app="app" ng-controller="compileProgressBar">
  <div ng-repeat="empresa in empresas" >
    {{empresa.name}} <div compile="createProgressBar(empresa.progress, 100, empresa.typeBar)"></div>
  </div>
</div>

Explicando...

Javascript

Crio a progressBar a partir de uma diretiva. Então, primeiramente crio a diretiva chamada compile. Ela será aplicada ao elemento que se tornará a progressBar.

No objeto de retorno da diretiva, a restrinjo a parâmetro (restrict: 'A'). Assim ela só poderá ser usada como atributo de uma tag, como uso nos exemplos, e não <compile></compile>. O que pode ser mudado, mas alteraria também o Controller.

No link, função dentro do objeto para manipular o DOM, atribuo os argumentos $scope, o $element e $attrs.

Dentro da função, uso o $scope.$watch, uma função que "escuta" por mudanças em algo. No caso, escuta por mudanças na diretiva compile e a cada mundaça executa o callback.

No callback uso .html() para modificar o conteúdo da div a qual está a diretiva. O novo conteúdo terá o que virá a ser passado dentro do atributo compile, no exemplo, é a variável html que recebe $attrs.compile.

E por último, uso o $compile mesmo, que recebe como argumento o conteúdo do elemento ($element.contents()). Passando também o $scope para a função.

Obs.: No seu caso, é importante a injeção da dependência do ["ui.bootstrap"].

HTML

Neste exemplo passo uma função que retorna a uma barra com valores modificados por seus argumentos, como no seu exemplo. Os argumentos da função, no caso, são dados vindos do próprio JSON percorrido no ngRepeat, no caso empresa.progress e empresa.typeBar. Sei que a uiProgressBar poderia vir no próprio HTML, mas como o intuito é mostrar o uso do $compile, a deixo sendo retornada como string na função.

Qualquer problema em relação a implementação peço que avise, para tentarmos resolver.

Espero ter ajudado. Abraço.

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 .