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

Question

I have a directive called "resizable" that adds functionality to an element to make it resizable.

I want to conditionally apply this directive to an element from a controller.

When I add this directive at run-time using attr , the attribute for the "resizable" directive is added, but the directive doesn't execute.

Here's an illustration: http://jsfiddle.net/HB7LU/3995/

What I'm expecting is that when $('span').attr('resizable', ''); is called, the class funky should be added to the span . Why doesn't it?

Answer 1

You need to use the $compile directive to notify angular of the changes. Basically the logic goes like this: "I've changed something within my element that you should be concerned about. Please compile the DOM against my scope":

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

    $compile(span)($scope);
}

Documentation here

NOTE: You SHOULD NOT use jQuery natively within a controller (... or anywhere really). It may select span tags outside of your element of interest. You SHOULD try writing a directive to wrap the logic that applies your resizable directive.