2017-04-05 9 views
2


NG-バインド-HTMLスタイルは

動作しないと私は、たとえば、HTML

icon: '<i class="fa fa-sign-out"><i>' 
のアイコンをrecive入力として NG-バインドHTML と私の問題を解決する方法を探しています

これはNG-バインドHTMLで正常に動作します:

let buttonIcon = angular.element(`<span ng-bind-html="icon"></span>`); 

とディスプレイは、そのようなものです:

enter image description here

が、私はFA-アイコン

icon: '<i class="fa fa-sign-out" style="color:red;"><i>' 

に赤い色を追加しようとしたが、無成功

と私はのHTMLを見て、それはそうよりその中にstyle="color:red;"はありません。

が、私はそのように表示するように習慣:

が使用 $sce.trustAsHtml

enter image description here

挨拶

+0

Iアイコン 'で解決: '' 'とthis'.test成功{ 色追加:赤。 } 'in css – Andrej

答えて

3

(私はdev内のスタイルを追加するツールを、それが動作するかどうか見てみました)..

https://docs.angularjs.org/api/ng/service/ $ sce

(function(angular) { 
 
    'use strict'; 
 
angular.module('myApp', ['ngSanitize']) 
 
    .controller('ctrl', ['$scope','$sce', function($scope,$sce) { 
 

 
$scope.uCanTrust = function(string){ 
 
return $sce.trustAsHtml(string); 
 
} 
 
$scope.Stack = '<i class="fa fa-stack-overflow" style="color:#0077dd;font-size:34px" aria-hidden="true"></i>'; 
 
$scope.icon= $sce.trustAsHtml('<i class="fa fa-stack-overflow" style="color:red;font-size:34px" aria-hidden="true"></i>'); 
 
    $scope.trustme= $sce.trustAsHtml('<a href="#" style="color:red">Click Me!</a>'); 
 

 
    
 
    }]); 
 
})(window.angular);
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
 
    <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script></head> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="ctrl"> 
 
<p ng-bind-html="trustme"></p> 
 
<p ng-bind-html="icon"></p> 
 
    
 
<p ng-bind-html="uCanTrust(Stack)"></p> 
 
</div> 
 
</body> 
 
</html>

関連する問題