Run through provided attributes

Question

I am new to angular, I have a requirement when I need to add many custom attributes to the custom elements directive, <radio-button> . I am currently doing this:

 <radio-button one-attr="some value" two-attr="some string" three-attr="some other string"><radio-button> 

I have a lot of switches on the page and writing custom attributes to each custom directive on this page looks messy. So, I'm looking for an alternative where I can pass a javascript array object that cyclically tunes each custom radio-button directive.

For example: (in the controller)

  $scope.values = [{ 'one-attr': 'some value', 'two-attr': 'some other value', 'three-attr': 'another value', /* and so on... */ }, { /* another custom attribute set */ } /* so on */ ] 

and then in my custom directive, I will pass the custom attribute directive as shown below:

  <radio-button ng-repeat="(key, value) in values" loop-attributes="key, value"></radio-button> 

Where above loop-attributes is a custom attribute directive applied to a custom element directive.

Please suggest how to do this.

If I'm wrong, suggest me how to handle this.

Answer 1

You will most likely have to use the $ compilation service, as radiobutton is a custom directive. You can have a parent directive that has a list of attributes and inside the directive creates a radioobutton element with attributes and then compiles it. For example, an input type was used.

http://plnkr.co/edit/7ANndIuHCFaGyjWkw7sa?p=preview

 // custom element .directive('customInput', function() { return { replace: true, restrict: 'E', template: '<input type="text"></input>' }; }) //wrapper directive .directive('customInputAttr', function($compile) { return { restrict: 'E', link: function(scope, element, attrs) { // This could be set even in controller scope.elemAttrs = [{ 'class': 'class1', 'ng-model': 'input1' }, { 'class': 'class2', 'ng-model': 'input2' }]; angular.forEach(scope.elemAttrs, function(elemAttr) { var customInputElem = angular.element('<custom-input></custom-input>'); angular.forEach(elemAttr, function(value, key) { customInputElem.attr(key, value) }); var elem = $compile(customInputElem)(scope); element.append(elem); }); } }; }) 

Answer 2

You will need to use a directive that replaces other directives. You can see here how to do it. I did jsfiddle to show you how this works. The repetition should be on the outer element, and not on the element containing the directive itself. This is because your custom-attr directive will be parsed before the ng-repeat parsing is received, so it will not be relevant to attr yet.

EDIT: I forgot the import step at the end of the link function, sorry. This updated fiddle should work. You need to recompile the directive so that your added ng-click directive actually works. You must also make sure that the function to which you are binding ng-click is available for this area, either by passing it, or by using ng-click="$parent.foo()"