2015-07-15 1 views
1

Я использую AngularJS v1.4.2 и хотел бы распечатать html из переменной в $scope.AngularJS v1.4.2 ng-bind-html и ng-bind-html-unsafe не работают

Я попытался использовать ng-bind-html и ng-bind-html-unsafe, но оба они не работают.

Вот мой контроллер:

var ctrl = angular.module('app.ctrl',['app.model']) 
     .controller('Controller',function($scope, $log, Model){ 
      $log.warn("controller für View wurde erstellt"); 
      $log.log(Model.getValue()); 
      $scope.sayHello="Hello World!"; 
      $scope.sayHelloHtml="<strong>Hello World Fett</strong>"; 
     }); 

И мой HTML код:

... 
<div ng-controller="Controller">Meine erste angularJS View {{ sayHello }} 
<div ng-bind="sayHello"></div> 
<div ng-bind-html="sayHelloHtml"></div> 
</div> 
... 
+1

_ "Не работает" _? Вы получаете какие-либо ошибки? – Cerbrus

+2

HTML-содержимое в переменных должно быть доверено, иначе HTML удаляется. используйте '$ sce', чтобы доверять вашему HTML-контенту. см. https://docs.angularjs.org/api/ng/service/$sce – Claies

ответ

3
var ctrl = angular.module('app.ctrl',['app.model','ngSanitize']) 
     .controller('Controller',function($scope, $log, Model,'$sce'){ 
      $log.warn("controller für View wurde erstellt"); 
      $log.log(Model.getValue()); 
      $scope.sayHello="Hello World!"; 
      $scope.sayHelloHtml="<strong>Hello World Fett</strong>"; 

      $scope.sayHelloHtml = $sce.trustAsHtml($scope.sayHelloHtml); 
     }); 

HTML

<div ng-controller="Controller">Meine erste angularJS View {{ sayHello }} 
      <div ng-bind="sayHello"></div> 
      <div ng-bind-html="sayHelloHtml"></div> 
      <div ng-bind-html-unsafe="sayHello"></div> 
      </div> 


Убедитесь, что вы включаете angular-sanitize.js и вводится ngSanitize модуль в приложении и впрыскивается $ sce в вашем контроллере.

0

в соответствии с Документами нг-затруднительное-HTML необходимо добавить ngSanitize ваших зависимостей модуля для обеспечения правильной работы, который выглядит, как вы не сделали;)

Проверьте пример на https://docs.angularjs.org/api/ng/directive/ngBindHtml для получения более подробной информации ,

Приветствия D