How do I include other directives in the template

Question

I wrote a simple custom directive. The template in this directive includes other directives (e.g. ui-sortable). Because it doesn't always use ui-sortable, I add it in the link phase. Yet it doesn't seem to apply:

        link: function ($scope,$element,attrs) {
attrs.$observe('admin', function(value) {
  if ($scope.admin) {
        $element.find("span").html("true");
      $element.find("ul").attr("ui:sortable","sortableOptions");
  }
});
    }

Full fiddle example is here: http://jsfiddle.net/VjfEf/4/

There are two lists. The first uses ui-sortable directly and drag/drop/sort works, the second uses my custom members directive. The directive does work, it renders, but the addition of ui-sortable in the exact same way as the first has no impact and drag/drop/sort does not.

I am assuming I am not understanding something about the processing phases of custom directives, and either need to add something to my custom directive?

Answer 1

You need to compile the newly added HTML.

$compile($element.contents())($scope);

Fiddle