When using custom directive, in which cases would it be better to use attribute instead of element type

Question

From the angularJS docs, it's written that the common case for using element directive

is when you are creating a Domain-Specific Language for parts of your template. Use an attribute when you are decorating an existing element with new functionality.

The documentation gives an example for the element type but not for the attribute type. What does decorating an existing element with new functionality mean? Can someone provide an example?

UPDATE
I know that syntax for writing a directive.

The example given in the doc for element is as follows

Using an element for the myCustomer directive is clearly the right choice because you're not decorating an element with some "customer" behavior; you're defining the core behavior of the element as a customer component.

I am looking for a similar example, but for attribute. An example that explains the case when using the custom directive as attribute would be useful.

Not sure if this example really answers your question, but this example demonstrates how to use the same data with different directives, one directive as an element and the others using an attribute: https://jsfiddle.net/nkgtpko0/ — Rob, Aug 11 '16 at 16:32
@Rob What I wanted to know was when to use the attribute type. — Harke, Aug 11 '16 at 17:13
@ Mikko Those links are the examples that I was looking for. Thanks. — Harke, Aug 11 '16 at 17:24

score 0 · Accepted Answer · edited Sep 22 '17 at 04:08

0

I got the answer I want. The links provide by @Mikko, link2 and link3 helped.

Those links give enough information to explain what decorating an existing element with new functionality mean. For eg: adding validation behavior to an input element.

edited Sep 22 '17 at 04:08

Graham

7,431
18
59
84

answered Aug 11 '16 at 17:30

Harke

1,279
4
25
30

score -2 · Answer 2 · edited Aug 12 '16 at 05:56

You can use an 'Element' or an 'Attribute' in a Directive. All you need to do is to state what you want to use in your template in your 'Directive' file i.e.

restrict: 'A' ... For Attributes and restrict: 'E' ... For Elements and restrict: 'AE' ... For Elements and Attributes.

Refer to following example.

//------------------------------------------------------------------------------------
# change-password.directive.js
# In this case you are using ... restrict: 'A' for Attributes
# So your template will have the following
# <!-- Directive As Attribute -->
# <div foo-change-password></div>
# Note that 'fooChangePassword' in the Directive below 
# changes to 'foo-change-password'in your template

(function() {
    'use strict';

    angular
        .module('app.foo.authentication')
        .directive('fooChangePassword', changePassword);

    /* @ngInject */
    function changePassword() {

        var directive = {
            restrict: 'A',
            templateUrl: 'app/foo/authentication/change-password/change-password-validation.tmpl.html',
            transclude: true,
            replace: true,
            bindToController: true,
            controller: 'ChangePasswordController',
            controllerAs: 'vm',
            link: link
        };
        return directive;

        function link($scope, $element, attrs) {

        }
    }

})();

//------------------------------------------------------------------------------------
# change-password.directive.js
# In this case you are using ... restrict: 'E' ... For Elements
# So your template will have the following
# <!-- Directive As Element -->
# <foo-change-password></foo-change-password>
# Note that 'fooChangePassword' in the Directive below 
#  changes to 'foo-change-password' in your template

(function() {
    'use strict';

    angular
        .module('app.foo.authentication')
        .directive('fooChangePassword', changePassword);

    /* @ngInject */
    function changePassword() {

        var directive = {
            restrict: 'E',
            templateUrl: 'app/foo/authentication/change-password/change-password-validation.tmpl.html',
            transclude: true,
            replace: true,
            bindToController: true,
            controller: 'ChangePasswordController',
            controllerAs: 'vm',
            link: link
        };
        return directive;

        function link($scope, $element, attrs) {

        }
    }

})();

//------------------------------------------------------------------------------------
# change-password-validation.tmpl.html
# This will be the template that you will inject in the 'change-password.tmpl.html'
# below. Note that the template being injected must have a <div> ... </div>.
# Otherwise your page wont render.

<div>
<form name="changePasswordForm">

    <md-input-container class="md-block">
        <label for="password" translate>CHANGE-PASSWORD.PASSWORD.LABEL</label>
        <input id="password"
            label="password"
            name="password"
            type="password"
            ng-model="vm.user.password"
            tri-same-password="changePasswordForm.confirm"
            required/>
    </md-input-container>

    <md-input-container class="md-block">
        <label for="password" translate>CHANGE-PASSWORD.PASSWORD_CONFIRM.LABEL</label>
        <input id="confirm"
            label="confirm"
            name="confirm"
            type="password"
            ng-model="vm.user.confirm"
            ng-keypress="handleKeyPress($event)"
            tri-same-password="changePasswordForm.password"
            ng-minlength="8"
            required/>
    </md-input-container>

    <div layout="row" layout-align="center center">
        <md-progress-circular ng-show="vm.loading" md-mode="indeterminate"></md-progress-circular>
    </div>

    <div layout="row" class="change-password-buttons-margin-top">
        <md-button
            class="md-warn full-width md-raised md-button"
            ng-click="vm.backToLoginClick()"
            translate="CHANGE-PASSWORD.LOGIN"
            aria-label="{{'CHANGE-PASSWORD.LOGIN' | translate}}">
        </md-button>

        <md-button
            class="md-primary full-width md-raised md-button"
            ng-disabled="vm.user.password !== vm.user.confirm"
            ng-click="vm.changePasswordClick()"
            translate="CHANGE-PASSWORD.BUTTON"
            aria-label="{{'CHANGE-PASSWORD.BUTTON' | translate}}">
        </md-button>
    </div>
</form>
</div>


//------------------------------------------------------------------------------------
# change-password.tmpl.html
# In this case 
# <!-- Directive As Element -->
# <foo-change-password></foo-change-password>

<div layout="row" flex layout-padding layout-fill layout-align="center center">
    <div class="change-password-card" flex="40" flex-lg="50" flex-md="70" flex-xs="100">
        <md-card>
            <md-toolbar class="padding-20 change-password-card-header">
                <div layout="row" layout-align="center center">
                    <h1 class="md-headline" translate>CHANGE-PASSWORD.TITLE</h1>
                </div>
            </md-toolbar>

            <md-content class="md-padding">
                <!-- Directive As Element -->
                <foo-change-password></foo-change-password>
        </md-card>
    </div>
</div>

//------------------------------------------------------------------------------------
# change-password.tmpl.html
# In this case 
# <!-- Directive As Attribute -->
# <div foo-change-password></div>

<div layout="row" flex layout-padding layout-fill layout-align="center center">
    <div class="change-password-card" flex="40" flex-lg="50" flex-md="70" flex-xs="100">
        <md-card>
            <md-toolbar class="padding-20 change-password-card-header">
                <div layout="row" layout-align="center center">
                    <h1 class="md-headline" translate>CHANGE-PASSWORD.TITLE</h1>
                </div>
            </md-toolbar>

            <md-content class="md-padding">
                <!-- Directive As Attribute -->
                <div foo-change-password></div>
            </md-content>
        </md-card>
    </div>
</div>

//------------------------------------------------------------------------------------
# In both instances your page will render.

I know how to use the directive using both the element and attribute. What I want to know is when best to use which type. — Harke, Aug 11 '16 at 17:12

When using custom directive, in which cases would it be better to use attribute instead of element type

2 Answers2