Using jQuery plugin as Angular Directive

Question

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 ?

looks like your directive is not able to access plugin. Did you try to get plugin data inside directive.? — Saurabh Agrawal
– Saurabh Agrawal, Commented Jan 25, 2017 at 10:14

Benjamin Lemoine · Accepted Answer · 2017-01-26 11:04:23Z

1

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

edited Jan 26, 2017 at 11:04

Benjamin Lemoine

10010 bronze badges

answered Jan 25, 2017 at 10:58

Shalom Peles

2,63211 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Benjamin Lemoine Over a year ago

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 ?

Shalom Peles Over a year ago

@BenjaminLemoine I update the answer. see fiddle here

Benjamin Lemoine Over a year ago

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 Over a year ago

The $observe element was fired twice. Testing if the attribute value is not empty before using the jQuery function solved my problem.

Collectives™ on Stack Overflow

Using jQuery plugin as Angular Directive

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related