Inserir uma string de modelo angular js dentro de um elemento

Estou tentando colocar algumas seqüências de caracteres de modelo js angulares dentro de um elemento e esperar uma saída compatível. Mas isso não está acontecendo.

HTML

Controlador:

 function filterController($scope){ ... $scope.arr = ["APPLE", "BANANA"]; $scope.fruitsView = ''; } 

A saída é apenas {{each}} .

Então, como eu insiro uma string de modelo js angular (aqui $scope.fruitsView ) dentro de um elemento?

Eu fiz um violino para isso.

Neste caso, você não quer apenas “inserir HTML”, mas compilá-lo. Você pode criar nós DOM usando o serviço $compile .

 var tpl = $compile( '

{{each}}

' )( scope );

Como você pode ver, $compile retorna uma function que usa um object de escopo como um parâmetro, contra o qual o código é avaliado. O conteúdo resultante pode ser inserido no DOM com element.append() , por exemplo.

Nota importante : Mas sob nenhuma circunstância qualquer código relacionado ao DOM pertence ao seu controlador. O lugar certo é sempre uma diretiva. Esse código pode ser facilmente lançado em uma diretiva, mas me pergunto por que você está programaticamente inserindo o HTML.

Você pode lançar alguma luz aqui para que eu possa fornecer uma resposta mais específica?

Atualizar

Supondo que seus dados vêm de um serviço:

 .factory( 'myDataService', function () { return function () { // obviously would be $http return [ "Apple", "Banana", "Orange" ]; }; }); 

E o seu modelo vem de um serviço

 .factory( 'myTplService', function () { return function () { // obviously would be $http return '

{{item}}

'; }; });

Em seguida, você cria uma diretiva simples que lê o modelo fornecido, compila e adiciona ao modelo:

 .directive( 'showData', function ( $compile ) { return { scope: true, link: function ( scope, element, attrs ) { var el; attrs.$observe( 'template', function ( tpl ) { if ( angular.isDefined( tpl ) ) { // compile the provided template against the current scope el = $compile( tpl )( scope ); // stupid way of emptying the element element.html(""); // add the template content element.append( el ); } }); } }; }); 

Então, a partir de sua opinião:

 

E no controlador, você simplesmente liga tudo:

 .controller( 'MyCtrl', function ( $scope, myDataService, myTplService ) { $scope.showContent = function () { $scope.items = myDataService(); // <- should be communicated to directive better $scope.template = myTplService(); }; }); 

E tudo deve funcionar em conjunto!

PS: isso é tudo assumindo que o seu modelo vem do servidor. Se isso não acontecer, seu modelo deve estar na diretiva, o que simplifica as coisas.