up vote 0 down vote favorite

I'm trying to use a jQuery plugin that can curve text (Arctext.js) as an Angular Directive.

The Directive seems to work fine, the given text is curved as expected, except that I want this text to be an Angular variable. And the problem is the jQuery plugin seems to be executed before Angular resolves the variable value.

My html element :

<h2 class="circle">{{ myController.myVar }}</h2>

My directive :

return {
    restrict: "C",
    link: function(scope, element, attrs) {
        element.arctext({radius: 500})
    }
}

The page displays '{{ myController.myVar }}' as curved text.

How to get the variable value instead ?

share|improve this question
1  
Will you share more code or prepare a fiddle? – Dario Jan 25 at 10:09
    
looks like your directive is not able to access plugin. Did you try to get plugin data inside directive.? – Saurabh Agrawal Jan 25 at 10:14
    
Here's a fiddle : jsfiddle.net/k8ffmbL0/1 – Benjamin Lemoine Jan 25 at 11:13
up vote 1 down vote accepted

Try this:

HTML:

<h2 class="circle" text="{{ myController.myVar }}"></h2>

Directive:

return {
    restrict: 'C',
    link: function(scope, element, attrs) {
        attrs.$observe('text', function(newval) {
            if (newval) {
                $(element).text(newval).arctext({radius: 500})
            }
        });
    }
}
share|improve this answer
    
The title is not showing. I suppose the arctext plugin use the .text() method to get the string inside element. How to apply the plugin to the 'text' attribute in your example ? – Benjamin Lemoine Jan 25 at 11:17
    
@BenjaminLemoine I update the answer. see fiddle here – Shalom Peles Jan 25 at 11:29
    
thank you, it's perfect !! – Benjamin Lemoine Jan 25 at 12:44
    
Ok but it doesn't work on my project. I don't know why... When the page is loading for the first time (ie: refresh button) the title appears correctly but not curved (like if the plugin is not instanced). If I click on a link and then I go back to this page, the title is correctly displayed and curved. It's like, at the first time, the plugin is not initialized yet. I can't reproduce the problem on fiddle... – Benjamin Lemoine Jan 26 at 8:59
    
The $observe element was fired twice. Testing if the attribute value is not empty before using the jQuery function solved my problem. – Benjamin Lemoine Jan 26 at 10:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.