how to add `required` attribute to angularjs directive

Question

I defined simple directive as you can see below:

(function () {
    'use strict';

    angular
        .module('myApp')
        .directive('biSelect', biSelect);

    function biSelect($compile) {
        var directive = {
            restrict: 'E',
            templateUrl: 'bi-select.html',
            scope: {
                required: '=?required'
            },
            controller: BiSelectController,
            controllerAs: 'vm'
        };

        return directive;
    }

    function BiSelectController() {
        var vm = this;
    }
})();

and this is directive template:

<select class="form-control">
    <option value=""></option>
</select>

now i want to add required attribute to select in directive when it was passed to directive, for example:

<bi-select required></bi-select>

how can i do that?

You should worry about how to add the ng-model attribute before worrying about the required attribute. Read AngularJS Developer Guide - Implementing custom form controls (using ngModel) — georgeawg
– georgeawg, Commented May 16, 2019 at 13:53
I read that guide but couldn't understand how to do that yet! — Rasool Ghafari
– Rasool Ghafari, Commented May 16, 2019 at 15:07

georgeawg · Accepted Answer · 2019-05-16 19:06:15Z

1

In the template use the ng-required directive:

  <select ng-required="vm.required">
    <option value=""></option>
  </select>

Because the required attribute is Boolean, none of the isolate scope binding will work:

scope: {
    //WONT work
    //required: '=?required'
},

Instead inject and use the $attrs object:

function BiSelectController($attrs) {
    var vm = this;
    vm.required = !!$attrs.$attr.required;
}

The controller uses the $attrs object to detect the presence or absence of the normalized required attribute and to set vm.required to either true or false.

For more information, see

answered May 16, 2019 at 19:06

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to add `required` attribute to angularjs directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related