Question

我正在使用angular directive

创建一个包含字体的列表

<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 Image Chrome Image

Answer 1

您可以使用ng-style指令＆amp;而不是将模型值附加到样式attr中的特定属性。将函数调用为ng-style为：ng-style = "mystyle($index)"

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

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

IE中的字体样式问题

1 个答案: