Understanding AngularJS Transclusion Directive

Understanding AngularJS Transclusion Directive

A ngTransclude directive is a thing I often found in many examples, yet I think it is not well explained in the official docs. I was never really sure how to use it, and I am sure I am not the only one. As I found, the general concept is not difficult, but documentation, which uses lots of big words, makes it hard to understand. I decided to create a quick user guide to describe how you can use ng-transclude with a short but expository example.

ngTranscludedirective is a thing I often found in many examples, yet I think it is not well explained in the official docs. I was never really sure how to use it, and I am sure I am not the only one. As I found, the general concept is not difficult, but documentation, which uses lots of big words, makes it hard to understand. I decided to create a quick user guide to describe how you can useng-transcludewith a short but expository example.

Basic directive — without transclusion

To explain transclusion in one sentence you could say that it is a way of including content from one template to another. Imagine a simple situation. You have a directive for a card with some data. It contains three elements — header, content and button. The template can look like this:

<div class="card">
  <h1 class="header">{{header}}</h1>
  <div class="content">{{content}}</div>
  <button
    type="submit"
    class="button"
    ng-click="buttonAction()">
    {{buttonText}}
  </button>
</div>

This HTML template allows you to use this card everywhere you want. This requires a code for a directive, for example, something like this:

(function() {
  'use strict';

  angular
    .module('app.card')
    .directive('Card', Card);

  function Card() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        header: '@',
        content: '@',
        buttonAction: '&',
        buttonText: '@'
      },
      templateUrl: 'card.html'
    };
  }
})();

It is very simple; data binding allows you to bind attributes values to this template. A 

header,contentandbuttonTextare bound as text in the places where corresponding expressions occur. You can also pass a function to a button usingbuttonAction. It can be done as simple as this:

<card 
  header="Hello"
  content="Do you want to continue?"
  button-text="Nope"
  button-action="$ctrl.close()">
</card>

It is a very good solution for making consistent cards in every place it is needed. When you want to change how the card looks like to the user, just apply changes to the template and you will get a discernible effect in every place that this directive is used.

javascript angularjs directive programming coding software-development software-engineering angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Software Developer vs Software Engineer — Differences: Bogus or Real?

In this article, see if there are any differences between software developers and software engineers. What you’re about to read mostly revolves around my personal thoughts, deductions, and offbeat imagination. If you have different sentiments, add them in the comment section, and let’s dispute! So, today’s topic…

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Hire AngularJS Developers

Is your business looking for Angularjs developers? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, our talented developers serve you to get the advantage of advanced features of the AngularJS framework. We offer...

Hire AngularJS Developers in India

Hire a Dedicated Mobile App Developer and hire web developers from HourlyDeveloper.io on an hourly, part-time or full-time contract basis to build extensive websites and Mobile Applications!

5 Core Criteria for Selecting Software Development Company - TopDevelopers.co

Check out these five criteria for the selection of your software vendor, and you will never regret having the wrong quality product made for you.