在Angular中向元素动态添加指令

Question

我有一个名为＆＃34; resizable＆＃34;为元素添加功能以使其可调整大小。

我想有条件地将此指令应用于来自控制器的元素。

当我在运行时使用attr添加此指令时，＆＃34; resizable＆＃34;的属性指令已添加，但指令不会执行。

以下是http://jsfiddle.net/HB7LU/3995/

的插图

我期待的是，在调用$('span').attr('resizable', '');时，应将funky类添加到span。为什么不呢？

Answer 1

您需要使用$compile指令通知角度更改。基本上逻辑是这样的：＆＃34;我已经改变了你应该关注的元素内的东西。请根据我的范围编译DOM＆＃34;：

function Controller($scope, $compile) {
    // Apply resizable directive to span
    var span = $('span');
    span.attr('resizable', '');

    $compile(span)($scope);
}

文档here

注意：你不应该在控制器中本地使用jQuery（......或者任何地方）。它可能会在您感兴趣的元素之外选择span个标记。您应该尝试编写一个指令来包装应用resizable指令的逻辑。