AngularJSの読み込みフォントフェイスオンデマンド

Question

私はAngularJSを初めて使っています。私は、フォントのcdnリンクのリストを返すWebサービスを持っています。私はそれを使用し、実行時にフォントを使用していくつかのテキストを表示したい。私のクライアントアプリケーションはangularJSで書かれています。どうすればこれを達成できますか？助けてください。これはこれまで私が試したことです。要求に応じてフォントフェイスを挿入するにはどうすればよいですか？

app.js（Webサービスによって返されたデータは、ここにリストとして表示されます。）

var app = angular.module('app', []); 

app.controller('appController', function($scope) { 

    $scope.fonts = [ 
    { 
     "family": "Abhaya Libre", 
     "url": "https://cdn.rawgit.com/mooniak/abhaya-libre-font/gh-pages/fonts/AbhayaLibre-Regular.otf" 
    }, 
    { 
     "family": "Gemunu Libre", 
     "url": "https://cdn.rawgit.com/mooniak/gemunu-libre-font/gh-pages/tests/fonts/GemunuLibre-Regular.otf" 
    }, 
    ]; 

}); 

app.html

<div ng-app="app" ng-controller="appController"> 

    <p ng-repeat="font in fonts"> 

    <span style="@font-face {font-family:{{font.family}}; src: url({{font.url}});}"> 
     {{font.family}} 
    </span> 

    </p> 

</div> 

JSFiddle - ここ

Answer 1

https://jsfiddle.net/lpsandaruwan/rpffoo06/がソリューションです、あなたはfont-familyを置いていないスタイルで{{font.family}}; http://pastebin.com/WmBv5XDB