2014-12-04 11 views
8

Więc mam „Szablon ciąg”, który wygląda tak:kątowa - Interpolate ciąg z html

var templateString = "Hello my name is {{name}}"; 

Nazwa że chcę interpolacji jest w zmiennej. Więc postępowałem w następujący sposób:

var miniScope = { 
name: "Chuck" 
}; 

var sentence = $interpolate(templateString)(miniScope); 
/* sentence: "Hello my name is Chuck" */ 

To działa. Teraz chciałbym pogrubione nazwę. Próbowałem oczywiście:

var miniScope = { 
name: "<strong>Chuck</strong>" 
}; 

Ale kod html zostanie usunięty. Masz pomysł, jak to osiągnąć?

PS: Dla tych z was, którzy zastanawiają się, dlaczego nie umieszczam łańcucha w szablonie, to dlatego, że mój ciąg szablonów pochodzi z serwera.

Odpowiedz

1

użyj tej dyrektywy, aby skompilować elementy z ciągu.

.directive('compile', ['$compile', function ($compile) { 
return function(scope, element, attrs) { 
    scope.$watch(
     function(scope) { 
      return scope.$eval(attrs.compile); 
     }, 
     function(value) { 
      element.html(value); 
      $compile(element.contents())(scope); 
     } 
    ); 
}; 
}]) 


$scope.name = "Vladimir"; 
$scope.str = "Hello my name is <strong>{{name}}</strong>"; 


<div compile="str"></div> 

i wykorzystanie $ sce skompilować zaufanego html Jeśli potrzebujesz Angular $sce doc

ale wszystkie z tych rzeczy nie kanciasty sposób właściwie, trzeba używać kilka różnych partials i umieścić go z ng obejmują dyrektywę.

+1

Tak naprawdę skończyłem robiąc to w zupełnie inny sposób. Opuszczę pocztę na wypadek, gdyby to pomogło komuś innemu. Dziękujemy za odpowiedź – MonsieurNinja

11

Ten komunikat brzmi "Cześć, nazywam się Chuck" zgodnie z oczekiwaniami. JavaScript jest niezmieniony od pytania.

var app = angular.module("app", ["ngSanitize"]); 
app.controller("TestCtrl", TestCtrl); 
function TestCtrl($scope, $interpolate) { 
    var templateString = "Hello my name is {{name}}"; 

    var miniScope = { 
    name: "<strong>Chuck</strong>" 
    }; 

    $scope.sentence = $interpolate(templateString)(miniScope); 
} 

I w HTML, należy użyć użyć ng-bind-html zachować HTML przed zakodowane.

<body ng-controller="TestCtrl"> 
    <div ng-bind-html="sentence"></div> 
    </body> 
+0

"ng-bind-html" działa z angle2? –