Как заменить HTML в шаблоне угловой

У меня есть переменная, которая хранит данныеКак заменить HTML в шаблоне угловой

this.storage = { decription: 'text <br> info \n' };

В HTML приношу это

<div> {{ ::$ctrl.storage.decription }} </div>

Однако текст отображается без какого-либо форматирования, но я хотел бы, как html, как его исправить?

источник

2016-11-07 splincode web-developer

В основном использовать ng-bind-html вам необходимо сообщить угловую, что строка содержимого HTML доверено Узнайте больше об этом, вы можете сослаться на этот article в угловых документах, чтобы добавить код ниже в вашем JS

$scope.storage.description = $sce.trustAsHtml('text <br> info \n');

Но просто эта линия будет бросать вам ошибку, говорящую «неизвестный провайдер» использовать, что вам нужно иметь angular-sanitize.js для того, чтобы впрыснуть $sce в контроллере и ngSanitize в вашем угловом модуле как var app = angular.module('app',['ngSanitize']);

var app = angular.module('app',['ngSanitize']); 
 
app.controller('Ctrl',function($scope,$sce){ 
 
    
 

 
$scope.storage = {}; 
 
    
 
$scope.storage.description = $sce.trustAsHtml('text <br> info \n'); 
 
    
 
    });

<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 

 

 

 

 
<div ng-app="app" ng-controller="Ctrl"> 
 
    
 
    
 
<div ng-bind-html="storage.description"></div> 
 

 
</div>

источник

2016-11-07 09:05:37

$ sce.trustAsHtml return TrustedValueHolderType, но мне нужен html –

вы попробовали запустить фрагмент? просто следуйте инструкциям в фрагменте кода, это сработает для вас –

это работа, спасибо –

Использование нг-связывания-HTML = "scopevar"

в примере:

<div ng-bind-html="$ctrl.storage.decription"></div>

дальнейшие детали могут быть найдены here

источник

2016-11-07 08:49:10 masterpreenz

я добавить в нг-связывать-HTML, но не работает, все прошло –

@ splincodeweb-разработчика это не то, что все прошло, ** $ ctrl.storage.description ** может быть пустым, в первую очередь. Попробуйте положить ** storage.description ** вместо ** $ ctrl.storage.description **. Также убедитесь, что ** storage.description ** правильно инициализируется в ** $ scope ** как ** $ scope.storage.description ** для ** ng-bind-html = "$ scope.storage.description" ** для отображения по назначению. – masterpreenz

это работа, спасибо –

использование ng-bind-html:

<div ng-bind-html="ctrl.storage.description"></div>

источник

2016-11-07 08:49:21 Laazo

Я добавляю к ng-bind-html, но не работаю, все прошло –

это работа, спасибо –

Отлично. – masterpreenz

либо вы можете использовать

this.storage = { decription: $sce.trustAsHtml('text <br> info \n')}; 
and use ng-bind-html

или написать директиву для этого,

(function() { 
    'use strict'; 
    angular 
     .module('app') 
     .directive('dynamic', dynamic); 

    dynamic.$inject = ['$compile']; 

    function dynamic($compile) { 
     return { 
      restrict: 'A', 
      replace: true, 
      link: function (scope, ele, attrs) { 
       scope.$watch(attrs.dynamic, function(html) { 
        ele.html(html); 
        $compile(ele.contents())(scope); 
       }); 
      } 
     }; 
    }; 
})();

и он может использовать как

<div dynamic="$ctrl.storage.decription"></div>

источник

2016-11-07 09:00:28

Это работа, спасибо –

Как заменить HTML в шаблоне угловой

ответ

Смежные вопросы