Search code examples
angularjspopupangularjs-ng-repeatwijmo

wj-popup in ng-repeat, Wijmo5 and AngularJS


I'm trying to make use of wj-popup inside an ng-repeat in an AngularJS application, but am having difficulty.

Basically, I've used the demo example for wj-popup and wrapped it in an ng-repeat as follows. I have an array of posts, each has a property that is its indexValue (post.indexValue).

Each button needs to have a different ID, so I expect that using post.indexValue should work, and it does set the button ID on each repetition correctly, but the calling function doesn't work and the popup doesn't appear, and I'm not sure what I'm doing wrong.

<div ng-repeat="post in posts">

        Click to open, move focus away to close:
        <button id="{{post.indexValue}}" type="button" class="btn">
            Click
        </button>


    <wj-popup class="popover" owner="#{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
        <ng-include src="'includes/popup.htm'"></ng-include>
    </wj-popup>
 </div>

Solution

  • Issue is with id. Pop up is not working even if there is no ng-repeat and owner id starts with any number. Changing button id to "btn{{post.indexValue}}" worked for me. Try this fiddle.

    <div ng-repeat="post in posts">
            Click to open, move focus away to close:
            <button id="btn{{post.indexValue}}" type="button" class="btn">
                Click
            </button>
    
    
            <wj-popup class="popover" owner="#btn{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
                <ng-include src="'includes/popup.htm'"></ng-include>
            </wj-popup>
    </div>