2014-10-15 14 views
9

Ho modello angularjs come stringa che include "ng-repeat" e altre direttive. Voglio compilarlo nel controller per produrre il risultato HTML come stringa.Genera stringa HTML da stringa modello AngularJS

esempio su quello che voglio applicare in angolare:

Input: 
------- 
var template = '<div ng-repeat="item in items">{{item.data}}</div>'; 

Output: 
-------- 
var result = '<div>1</div><div>2</div><div>3</div><div>4</div>'; 

voglio che questo sia fatto nel controllore ho e ho provato la seguente:

var template = '<div ng-repeat="item in items">{{item.data}}</div>'; 
var linkFunction = $compile(template); 
var result = linkFunction($scope); 

console.log(result); // prints the template itself! 

Grazie!

risposta

7

Dare a questo un vortice:

var template = angular.element('<div ng-repeat="item in items">{{item.data}}</div>'); 
var linkFunction = $compile(template); 
var result = linkFunction($scope); 
$scope.$apply(); 

console.log(template.html()); 
+0

Invia "Errore: $ applica già in corso". Sto usando Angular 1.0.8 – phikry

+0

Prova a cambiare "$ scope. $ Digest();" a "$ scope. $ apply();" - guarda la mia modifica. – Fordio

+0

Nella mia applicazione lancia: $ rootScope: inprog "Azione già in corso": $ digest già in corso (utilizzando ng 1.5.5) –

4

A tal fine mi sono fatto un paio direttiva di progetti fa:

angular.module('myApp') 

.directive('ngHtmlCompile', ["$compile", function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.ngHtmlCompile, function (newValue, oldValue) { 
       element.html(newValue); 
       $compile(element.contents())(scope); 
      }); 
     } 
    } 
}]); 

e poi per esempio:

<div ng-html-compile='<div ng-repeat="item in items">{{item.data}}</div>'></div> 

o addirittura la stringa può essere dinamica:

<div ng-repeat="item in items" ng-html-compile="item.template"> 
</div>