使用 jQuery 插件作为 Angular 指令

Question

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

指令似乎工作正常，给定的文本按预期弯曲，除了我希望这个文本是一个 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})
            }
        });
    }
}