2017-07-03 94 views
0

我创建包含的字体采用了棱角分明的指令字体造型问题在IE

<li ng-repeat='o in options'><button class='btn btn-blue checked-dropdown' style='font-family: {{o.css}}; width: 100%' type='button' ng-click='action($event, o.css)'><i ng-if='o.active' class='fa fa-check'></i>{{o.name}}</button></li> 

    options: [ 
      { name: 'Sans-Serif', css: 'Arial, Helvetica, sans-serif' }, 
      { name: 'Serif', css: "'times new roman', serif" }, 
      { name: 'Wide', css: "'arial black', sans-serif" }, 
      { name: 'Narrow', css: "'arial narrow', sans-serif" }, 
      { name: 'Comic Sans MS', css: "'comic sans ms', sans-serif" }, 
      { name: 'Courier New', css: "'courier new', monospace" }, 
      { name: 'Garamond', css: 'garamond, serif' }, 
      { name: 'Georgia', css: 'georgia, serif' }, 
      { name: 'Tahoma', css: 'tahoma, sans-serif' }, 
      { name: 'Trebuchet MS', css: "'trebuchet ms', sans-serif" }, 
      { name: "Helvetica", css: "'Helvetica Neue', Helvetica, Arial, sans-serif" }, 
      { name: 'Verdana', css: 'verdana, sans-serif' }, 
      { name: 'Proxima Nova', css: 'proxima_nova_rgregular' } 
     ] 

当我点击链接,然后完整的字体列表显示与应用上的CSS的列表。 它在Chrome,但在IE浏览器工作正常,只是字体名以明文显示 IE ImageChrome Image

回答

0

相反的风格ATTR模型值连接到特定属性的,你可以利用NG风格指令的&呼叫的在NG-风格功能:ng-style = "mystyle($index)"

$scope.mystyle = function(index){ 
     return { 
     'font-family': $scope.options[index].css, 
     'width': "100%" 
     } 
    } 

http://plnkr.co/edit/Ew8VyCWojAiyCqaU55qM?p=preview