current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Problem statement: show a JQ buttonset for each element in a controller scope array.

So something like this would be logical:

<div ng-repeat='a in algos' mybuttonset>
   <input name='X' id='A'><label for='A'>
</div>

But... In JQ buttonset, if the id of the input/label pairs are not unique, each time the directive calls buttonset() the size of the button grows. eg. If you have 20 elements in 'algos' the buttons are huge.

So how to make the id's unique? I thought {{$index}} inside ng-repeat would work:

<div ng-repeat='a in algos' mybuttonset>
   <input name='X' id='A{{$index}}'><label for='A{{$index}}'>
</div>

But in that case, angular reports the syntax error:

Syntax error, unrecognized expression: [for=A{{$index}}] <div ng-repeat="a in algos" dwbuttonset="" class="ng-scope ui-buttonset">

A very simple example showing the essence of the three cases (normal size, growing buttons, and syntax error) is at this Plunker.

All help and comments appreciated.

Danny

share|improve this question

1 Answer 1

up vote 2 down vote

It seems that the for and id attribute values are not set when you call the jquery plugin

Change it to:

.directive('dwbuttonset', function() {
    return function(scope, elm, attrs) {
    setTimeout(function() {
      (elm).buttonset(); 
    },0);
    };
});

This way you call the plugin after the $digest phase of the dom elements.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.