send array of attributes to directive

Question

I read about ng-attr for directive, but I want to send array of attributes to directive as example:

<myElement attributes="attributes"></myElement>

And my directive as example:

myApp.directive('myElement', function(){
 return {
    restrict: 'E',
    require: 'ngModel',
    template: '<div>' + 
              '<!-- I want to add this attributes on the div element>' + 
              '</div>',
    replace: true,
    scope: {
        attributes: '=attributes'
    },            
  }
});

And the attributes is in controller as the following:

$scope.attributes = {"class": "test", "id": "test", "style": "color: 'red'"}

So, How can I set array of attributes in element in directive ?

Mehmet Otkun · Accepted Answer · 2015-01-06 13:20:58Z

1

In link function of your directive

link:function(scope, element, attrs){
     var templateElement = angular.element(element[0].firstChild) //this is you template div el.
      angular.forEach(scope.attributes, function(value, key){
           //if you want to set the root element
           attrs.$set(key, value)
           //if you want to set template root div
          templateElement.attr(key, value)
      })
}

answered Jan 6, 2015 at 13:20

Mehmet Otkun

1,3949 silver badges24 bronze badges

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

Comments

BuriB · Accepted Answer · 2015-01-06 13:28:10Z

0

html:

<my-element attributes="attributes"></my-element>

directive:

myApp.directive('myElement', function () {
            return {
                restrict: 'E',
                require: 'ngModel',
                template: '<div class="{{attributes.class}}" id="{{attributes.id}}" style="{{attributes.style}}">' +
                'I want to add this attributes on the div element' +
                '</div>',
                replace: true,
                scope: {
                    attributes: '=attributes'
                }
            }
        });

controller:

$scope.attributes = {"class": "test", "id": "test", "style": "color: red"};

answered Jan 6, 2015 at 13:28

BuriB

1,3239 silver badges16 bronze badges

Collectives™ on Stack Overflow

send array of attributes to directive

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related