如何在AngularJS中使用Cufon

how use Cufon in AngularJS

本文关键字：Cufon AngularJS      更新时间：2023-09-26

我正在处理一个使用angularJs的项目，我使用Cufon来更改字体。现在，当控制器加载时，cufon替换角度表达式，然后angularJs将运行。这是我的问题。我希望Cufon在Angular表达式Binding之后运行。有人能帮我吗？

在我的HTML页面中：

        <span class="input-label" id="lb" >{{s}}</span>

和js:

        $scope.s = "hiiii";
        Cufon.replace('#lb', {onAfterReplace: Bifon.convert, fontFamily: 'B Titr'});

问题是在角度绑定发生之前，Cufon会更改表达式值。

有人能帮我吗？

您可能需要使用一个指令并侦听元素以准备就绪：

html:

<div ng-controller="MyController">
    <div class="thing" ng-bind="content" cufon-replace-directive>
        content {{content}}
    </div>
</div>

js:

function MyController($scope) {
  $scope.content = [
    'param1', 'param2'
  ];
}
angular.module('myApp', [])
  .directive('cufonReplaceDirective', function() {
    return function(scope, element, attrs) {
        element.ready(function(){
          element.html(element.html().replace(/[0-9]/g,"!!!"))
        })
    };
});

工作示例

为cufon:更新

function MyController($scope) {
  $scope.content = [
    'param1', 'param2'
  ];
}
angular.module('myApp', [])
  .directive('cufonReplaceDirective', function() {
    return function(scope, element, attrs) {
        scope.content = ["somecontent123"]
        element.ready(function(){
          Cufon.replace('.thing', {onAfterReplace: Bifon.convert, fontFamily: 'B Titr'});
        })
    };
});
相关文章：