使用 jQuery 插件作为 Angular 指令

Question

我正在尝试使用可以将文本 (Arctext.js) 曲线化的 jQuery 插件作为 Angular 指令。

指令似乎工作正常，给定的文本按预期弯曲，只是我希望此文本成为 Angular 变量。问题是 jQuery 插件似乎在 Angular 解析变量值之前执行。

我的 html 元素：

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

我的指令：

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

页面将“{{ myController.myVar }}”显示为曲线文字。

如何获取变量值？

Answer 1

试试这个：

HTML:

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

指令：

return {
    restrict: 'C',
    link: function(scope, element, attrs) {
        attrs.$observe('text', function(newval) {
            if (newval) {
                $(element).text(newval).arctext({radius: 500})
            }
        });
    }
}

使用 jQuery 插件作为 Angular 指令

Using jQuery plugin as Angular Directive

javascript

jquery

jquery-plugins

angularjs

angularjs-directive