Using local variables from an external HTML file within an AngularJS directive template

Question

Using local variables from an external HTML file within an AngularJS directive template

Just making sure I am wording my question correctly, but I have not been able to find any information on this specific topic. Imagine I have an AngularJS directive that looks something like this:

angular.module( 'example', [] ).directive(
        'exampleDirective', ['$compile', '$http',
        function($compile, $http) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {

                    var listOfItems = attrs.listOfItems;
                    var foo = attrs.foo;
                    var template =
                        '<ul>' +
                            '<li ng-repeat="item in ' + listOfItems + '">'+
                                '<i ng-click="clicked(item)">'+
                                    '{{item.' + foo + '}}'+
                                '</i>'+
                             '</li>'+
                         '</ul>';

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

The variable listOfItems is an array containing objects such as

[{'Name': 'this'}, {'Name': 'that'}]

, with foo being Name.

Now, I want to move the template into its own HTML file and load it using an HTTP call. How should the template be structured in the HTML file? Since the local variables won't be accessible in the file, I'm unsure about what needs to be adjusted. Any advice or suggestions would be greatly appreciated. Thank you.

javascript angularjs

Answer 1

Answer №1

Your scope variables will be accessible in the external template.

Here is the updated directive code:

angular.module( 'sample', [] ).directive(
  'sampleDirective', ['$compile', '$http',
    function($compile, $http) {
      return {
        restrict: 'A',

        // ... 

        templateUrl: 'my_new_template.html',

        // ...
      };
    }
  ]
);

my_new_template.html:

<ul>
  <li ng-repeat="product in ' + productsList + '">
    <i ng-click="selected(product)">
      {{product.' + bar + '}}
    </i>
  </li>
</ul>

Answer 2

Your scope variables will be accessible in the external template.

Here is the updated directive code:

angular.module( 'sample', [] ).directive(
  'sampleDirective', ['$compile', '$http',
    function($compile, $http) {
      return {
        restrict: 'A',

        // ... 

        templateUrl: 'my_new_template.html',

        // ...
      };
    }
  ]
);

my_new_template.html:

<ul>
  <li ng-repeat="product in ' + productsList + '">
    <i ng-click="selected(product)">
      {{product.' + bar + '}}
    </i>
  </li>
</ul>

Answer 3

Answer №2

If you want to achieve this, you can use the compile function within your directive. Here is an example in this Plunker

directive('exampleDirective', function () {
  return {
    restrict: 'EA',

    templateUrl: 'template.html',

    compile: function (element, attrs) {          
      var template = element.html()
                      .replace('#__LIST__#', attrs.listOfItems)
                      .replace('#__FOO__#', attrs.foo);

      element.html(template);

      return function link(scope, element, attrs) {}
    }
   };
});

In this code snippet, the content of the template.html file is as follows:

<ul>
  <li ng-repeat="item in #__LIST__#">
    <i ng-click="clicked(item)">{{ item.#__FOO__# }}</i>
  </li>
</ul>

Please confirm if this meets your requirements.

Answer 4

If you want to achieve this, you can use the compile function within your directive. Here is an example in this Plunker

directive('exampleDirective', function () {
  return {
    restrict: 'EA',

    templateUrl: 'template.html',

    compile: function (element, attrs) {          
      var template = element.html()
                      .replace('#__LIST__#', attrs.listOfItems)
                      .replace('#__FOO__#', attrs.foo);

      element.html(template);

      return function link(scope, element, attrs) {}
    }
   };
});

In this code snippet, the content of the template.html file is as follows:

<ul>
  <li ng-repeat="item in #__LIST__#">
    <i ng-click="clicked(item)">{{ item.#__FOO__# }}</i>
  </li>
</ul>

Please confirm if this meets your requirements.

Answer 5

Answer №3

One option is to utilize $http.get within the link function to retrieve the HTML content.

Alternatively, you can include:

return {
     restrict: 'A',
     templateUrl: 'myhtml.html'

The content of myhtml file could look like this:

<ul>
    <li ng-repeat="item in ' + listOfItems + '">
        <i ng-click="clicked(item)">{{item.' + foo + '}}>
        </i>
    </li>
 </ul>

Answer 6

One option is to utilize $http.get within the link function to retrieve the HTML content.

Alternatively, you can include:

return {
     restrict: 'A',
     templateUrl: 'myhtml.html'

The content of myhtml file could look like this:

<ul>
    <li ng-repeat="item in ' + listOfItems + '">
        <i ng-click="clicked(item)">{{item.' + foo + '}}>
        </i>
    </li>
 </ul>

Using local variables from an external HTML file within an AngularJS directive template

Answer №1

Answer №2

Answer №3

Similar questions

How can I retrieve the SID received in a different tab using MSAL.js?

The modal window obstructs my view on the screen

Issue with loading dynamic content on a webpage using HTML and JavaScript through AJAX

Tips on utilizing the enter key to add my <li> element to the list?

Tips for creating a stylish scrollbar in a React Material-Table interface

Converting a JavaScript string into an array or dictionary

Incorporate the previous page's location path into the next page using Props in Gatsby Link

Gulp does not work well with Android APK compilation

Guide to executing the refresh() function on a kendo-grid using an Angular controller

Instructions on how to trigger a function after adding HTML content to the directive

Merging RXJS observable outputs into a single result

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

WebGl - Perspective skewing perspective

"Array.Find function encounters issues when unable to locate a specific string within the Array

Error: The post request was blocked due to cross-origin restrictions

Struggling to understand the process of creating a new page in Express

Is it optimal to have nested promises for an asynchronous file read operation within a for loop in Node.js?

Combining multiple JSON strings into a single object using JavaScript

function called with an undefined response from ajax request in React

Steps to display a JSX component stored in a variable