how use Cufon in AngularJS

Question

i 'm working on project that work with angularJs, and i use Cufon to change fonts. now, when controller loaded, cufon replace angular expressions and after that angularJs will run. that's my problem. i want Cufon run after Angular expression Binding. any one can help me?

in my HTML page:

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

and in js:

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

problem is where before angular binding happened, Cufon changes expression value.

any one can help me?

Answer 1

You might want to use a directive and listen to the element to be ready:

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,"!!!"))
        })
    };
});

Working example

updated for 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'});
        })
    };
});