javascriptangularjscufon

how use Cufon in AngularJS


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?


Solution

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