Pass variable to custom Angular directive

Question

I have an accordion list, in which I want to be able to open certain items. I have created accordion-open directive, which should open the particular item if shouldBeOpen is true

Here is the HTML element (items are printed in loop)

<div class="m-list-item-head accordion-item" accordion-open="{{shouldBeOpen}}">

And here is my custom directive

(function () {
  'use strict';

  angular.module('myApp').directive('accordionOpen', function () {
    return {
      restrict: 'A',
      link: function(scope, element) {
          if (open) {
            $(element).closest('.accordion-item').siblings().slideDown('fast');
            $(element).closest('.accordion-item').addClass('opened');
          }
      }
    }
  });
})();

I am not able to read the contents of accordion-open within the directive.

Tarun Dugar · Accepted Answer · 2015-11-26 07:13:38Z

1

The interpolate expressions are not required. So change to :

accordion-open="shouldBeOpen"

Next, add attrs to your link function:

link: function(scope, element, attrs)

And use $eval to get the value of the attribute in your link function:

console.log(scope.$eval(attrs.accordionOpen))

answered Nov 26, 2015 at 7:13

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

Pass variable to custom Angular 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