Is there a method for dynamically loading angular directives?

Question

Is there a method for dynamically loading angular directives?

Check out this quick demo:

Essentially, both

<div data-foo-{{letterA}}></div>

and

<div data-ng:model="foo-{{letterB}}"></div>

are not being interpolated.

I'm trying to figure out a way to dynamically load one of multiple inline templates.

Apologies if this question has already been asked, but my search didn't yield any results.

I think Radim Köhler has provided the correct solution. Before their answer, I managed to put together a method to load directives from another directive using the following code:

angular.module('myApp', []).directive('loadTmpl', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function($scope, $element, $attr) {
            $element.html("<div data-card-"+$attr.loadTmpl+"></div>");
            $compile($element.contents())($scope);
        }
    };
});

And:

<div data-load-tmpl="{{directiveName}}"></div>

I believe this is the most minimalistic approach, but there may be some issues with it, so please refer to the answer below for more details.

javascript angularjs

Answer 1

Answer №1

Here is a revised version of the code using the updated fiddle. The view now looks like this:

<div my-selector name="letterA"></div>
<div my-selector name="letterB"></div>

This is how the controller has been adjusted:

function myCtrl($scope) {
    $scope.letterA = 'bar';
    $scope.letterB = 'baz';
}

Additionally, a new directive called mySelector has been created to contain the selector:

.directive('mySelector', 
  [       '$templateCache','$compile', 
  function($templateCache , $compile) {
    return {
      scope: {
        name: '='
      },
      replace: true,   
      template: '',            
      link: function (scope, elm, attrs) {

        scope.buildView = function (name) {
            var tmpl = $templateCache.get("dir-foo-" + name);
            var view = $compile(tmpl)(scope);
            elm.append(view);
        }
      },
      controller: ['$scope', function (scope) {
        scope.$watch('name', function (name) {
            scope.buildView(name);
        });
      }],          
    };
}])
.run(['$templateCache', function ($templateCache) {
    $templateCache.put("dir-foo-bar", '<div data-foo-bar></div>');
    $templateCache.put("dir-foo-baz", '<div data-foo-baz></div>');
}])

If you find this version suitable, credit goes to Render a directive inside another directive (within repeater template) and AngularJS - Directive template dynamic. If not, feel free to hold me accountable.

Answer 2

Here is a revised version of the code using the updated fiddle. The view now looks like this:

<div my-selector name="letterA"></div>
<div my-selector name="letterB"></div>

This is how the controller has been adjusted:

function myCtrl($scope) {
    $scope.letterA = 'bar';
    $scope.letterB = 'baz';
}

Additionally, a new directive called mySelector has been created to contain the selector:

.directive('mySelector', 
  [       '$templateCache','$compile', 
  function($templateCache , $compile) {
    return {
      scope: {
        name: '='
      },
      replace: true,   
      template: '',            
      link: function (scope, elm, attrs) {

        scope.buildView = function (name) {
            var tmpl = $templateCache.get("dir-foo-" + name);
            var view = $compile(tmpl)(scope);
            elm.append(view);
        }
      },
      controller: ['$scope', function (scope) {
        scope.$watch('name', function (name) {
            scope.buildView(name);
        });
      }],          
    };
}])
.run(['$templateCache', function ($templateCache) {
    $templateCache.put("dir-foo-bar", '<div data-foo-bar></div>');
    $templateCache.put("dir-foo-baz", '<div data-foo-baz></div>');
}])

If you find this version suitable, credit goes to Render a directive inside another directive (within repeater template) and AngularJS - Directive template dynamic. If not, feel free to hold me accountable.

Is there a method for dynamically loading angular directives?

Answer №1

Similar questions

How can you make the table rows in jQuery scroll automatically while keeping the table header fixed in

Updating the @mui/x-data-grid table dynamically upon fetching new data

Is there a way for me to store the output of an AJAX call?

Checkbox in Angular FormGroup not triggering touched state

Nodejs restricts the user from performing the action

Each time the page is reloaded, the animation's frames per second (fps

A beginner's guide to integrating ng-class into a directive template using AngularJS

Loading SVGs on the fly with Vue3 and Vite

My jQuery Ajax seems to have a glitch, can someone help me figure out

"NODEJS: Exploring the Concept of Key-Value Pairs in Object

Accessing form objects in Typescript with AngularJS

Dealing with an Ajax request that returns a file or partial HTML in the event of an error - what is the best approach?

Exploring the inner workings of self-referencing mechanics in functions

Generating navigation links with search queries

Error: 'error' is undefined

The PHP header() function is not properly redirecting the page, instead it is only displaying the HTML

Just starting out with callback functions (using a callback as an argument)(Javascript)

What is the best way to decipher a base64 API response in AngularJs?

Is there a way to verify HTML binding prior to setting up an AngularJS directive?

Animated div or fieldset featuring a multi-step form