angularjs常量为材质图标

我目前有一个不断重复使用的文本如下。不过，我想用材质图标替换。angularjs常量为材质图标

如何使它工作？

当前代码

.constant('$abbreviationProvider', { 
    "Legend": { 
     "B": "Bull", 
     "S": "Sheep", 
     "H": "Horse" 
    },

我使其

.constant('$abbreviationProvider', { 
    "Legend": { 
     "B": '<i class="material-icons">&#xE861;</i>', 
     "S": '<i class="material-icons">&#xE862;</i>', 
     "H": '<i class="material-icons">&#xE863;</i>', 
    },

遗憾的是，只有文字显示。我想显示图标

如何操作？

来源

2017-08-09 lotteryman

哪里是你的代码，显示项目？ – devqon

检查下面的答案，看看它是你在找什么？ @lotteryman – Vivz

您可以使用过滤器指令

var myApp = angular.module('myApp',["ngSanitize"]); 
 
    
 
    myApp.controller('MyController', ['$sce', '$scope', function($sce, $scope) { 
 
     $scope.detail = { 
 
      "Legend": { 
 
       "B": '<i class="material-icons">&#xE861;</i>', 
 
       "S": '<i class="material-icons">&#xE862;</i>', 
 
       "H": '<i class="material-icons">&#xE863;</i>' 
 
      } 
 
     }; 
 
    }]); 
 
    myApp.filter('unsafe', function($sce) { 
 
     return $sce.trustAsHtml; 
 
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.5/angular-sanitize.js"></script> 
 

 
<body ng-app="myApp" ng-controller="MyController"> 
 
    <div ng-repeat="(key,val) in detail.Legend"><span ng-bind-html="val | unsafe"></span></div> 
 
</body>

$sce的ngSanitize的帮助更多的信息来实现这一目标：https://docs.angularjs.org/api/ng/service/ $ SCE

来源

2017-08-09 10:58:36 Vivz

angularjs常量为材质图标

回答

相关问题