Angular Directive Different Template

Question

I have a directive myDirective with variable type. If I run I want the directive to use templateUrl: x-template.html. If I do <

Answer 1

If you're willing to live on the bleeding edge with a build on the 1.1.x code path (note the warning attached to every 1.1.x build notes entry so I don't dilute this answer by repeating it again here), you're in luck--this very feature was just added in the 1.1.4 release on April 3rd. You can find the release notes for 1.1.4 here and the feature's task log includes a Jasmine test that demonstrates how to use the new functionality.

If you're more conservative and are using a 1.0.x release, then you won't be able to accomplish this as easily, but it can be done. Mark Rajcok's solution looks like it would fit your requirements as-stated, but I would just add a few additional notes:

• Aside from its 1.1.4 release, compile-time directives don't support modification at runtime.
  • As of 1.1.4, you can safely modify the attributes of compile-time directives, but only from another compile-time directive.
• You may want to consider replaceWith() instead of append() since is not a standard-defined HTML element type.
• If your X and Y templates contain additional directives, I don't think you'll be able to pass attributes on through to the root element of your template so easily.
  • A directive with replace: true will transfer attributes from the source element to its replacement root, but I do not think that ngInclude will do the same from is host to the root of the included template.
  • I also seem to recall that ngInclude does not require that its template have exactly one root element.
  • You could perhaps preserve attributes on a replacement parent by using replaceWith() instead of append() and wrapping the
    tag within a

    . The outer

    could hold attributes and would still be accessible after the

    element replaced itself with loaded content.
• Be aware that ngInclude creates a new scope. This subjects you to a flashing yellow klaxons warning about the dangers of primitive scope models. For more information, see this fine page from Angular's GitHub depot.

I can propose another alternative for those on 1.0.x, but it involves a fair amount of code. It's a more heavy-weight operation, but it has the upside of not only being able of switching between templates, but full-fledged directives as well. Furthermore, its behavior is more readily dynamic.

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'partials/directive/my-directive.html',
        link: function(scope, element, attrs, ctrl) {
            // You can do this with isolated scope as well of course.
            scope.type = attrs.type;
        }
    }
);

my-directive.js

my-directive.html