1

No angular, percebo que o escopo do Controller não está sendo aplicado em um determinado trecho do código, quando o mesmo é criado dinamicamente.

Por exemplo, eu tenho um determinado conteúdo dentro de uma tag script, com o type definido para text/ng-template, para poder usar como template. Quero adicionar esse trecho a um Controller existente. Porém ao fazer isso, o angular não está sendo processado no novo html gerado.

Exemplo:

angular.module('app', [])

.controller('TestCtrl', function ($scope)
{
     $scope.name = 'Wallace';
  
  $('#ctrl').append($('#tpl-name').html());

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
   <div ng-controller="TestCtrl" id="ctrl">
       <p>Meu nome é {{  name }}</p>
   </div>
</div>

<script type="text/ng-template" id="tpl-name">
  <b>Meu nome é {{ name }}</b>
</script>

Como posso fazer para que o trecho adicionado no controller seja interpretado pelo AngularJS?

1 Resposta 1

2

Você deve compilar seu template, especificando qual o escopo da compilação. Isso é feito através do serviço $compile.

angular.module('app', []).controller('TestCtrl', function ($scope, $compile) {
    $scope.name = 'Wallace';
    $('#ctrl').append($compile($('#tpl-name').html())($scope));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
   <div ng-controller="TestCtrl" id="ctrl">
       <p>Meu nome é {{  name }}</p>
   </div>
</div>

<script type="text/ng-template" id="tpl-name">
  <b>Meu nome é {{ name }}</b>
</script>

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 .