How to create a directive with a dynamic template in AngularJS?

by

i’ve used the $templateCache to accomplish something similar. i put several ng-templates in a single html file, which i reference using the directive’s templateUrl. that ensures the html is available to the template cache. then i can simply select by id to get the ng-template i want.

template.html:

<script type="text/ng-template" id=“foo”>
foo
</script>

<script type="text/ng-template" id=“bar”>
bar
</script>

directive:

myapp.directive(‘foobardirective’, ['$compile', '$templateCache', function ($compile, $templateCache) {

    var getTemplate = function(data) {
        // use data to determine which template to use
        var templateid = 'foo';
        var template = $templateCache.get(templateid);
        return template;
    }

    return {
        templateUrl: 'views/partials/template.html',
        scope: {data: '='},
        restrict: 'E',
        link: function(scope, element) {
            var template = getTemplate(scope.data);

            element.html(template);
            $compile(element.contents())(scope);
        }
    };
}]);

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  3. How can I dynamically add a directive in AngularJS?
  4. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  5. How to select an element by classname using jqLite?
  6. AngularJS ng-style with a conditional expression
  7. Confused about Angularjs transcluded and isolate scopes & bindings
  8. Rendering directives within $sce.trustAsHtml
  9. How to allow only a number (digits and decimal point) to be typed in an input?
  10. How to autocapitalize the first character in an input field in AngularJS?
  11. Angular directive how to add an attribute to the element?
  12. get original element from ng-click
  13. How to understand the `terminal` of directive?
  14. How can I test events in angular?
  15. AngularJS : ng-repeat filter when value is greater than
  16. angularjs share data config between controllers
  17. AngularJS Group By Directive without External Dependencies
  18. AngularJS watch DOM change
  19. How do I apply an AngularJS directive based on a class set by ng-class?
  20. $apply vs $digest in directive testing
  21. When to use the AngularJS `$onInit` Life-Cycle Hook
  22. AngularJS – how to override directive ngClick
  23. Bind class toggle to window scroll event
  24. Angular adds strange options into select element when setting model value
  25. Angular directive name: only lower case letters allowed?
  26. Angular directive for a fallback image
  27. What is ng-transclude?
  28. How to detect browser using angularjs?
  29. AngularJS. Convert tag value (Unix time to human-readable time)
  30. how do I get ng-include directive to work with a Content Delivery Network?

Leave a Comment