Inserting Parameters into JS using Angular

[#1]

Hopefully and elementary query for a web pro but I'm having difficulty dynamically inserting values into some inline JS using angular.

Code which works (Static variables):

Widget Code:

<lui-button ng-click="app.field('AFieldName').selectMatch('TheSearchValue', false)">Fixed</lui-button>

HTML Output

<button lui-class-list="classList" ng-transclude="" ng-click="app.field('AFieldName').selectMatch('TheSearchValue', false)" class="ng-isolate-scope lui-button"><span class="ng-scope">Fixed</span></button>

Code Which Does not work (dynamic):

Widget Code:

<lui-button ng-click="app.field('{{settings.FilterDimension}}').selectMatch('{{settings.FilterValue}}', false)">Dynamic</lui-button>

HTML Output:

<button lui-class-list="classList" ng-transclude="" ng-click="app.field('AFieldName').selectMatch('TheSearchValue', false)" class="ng-isolate-scope lui-button"><span class="ng-scope">Dynamic</span></button>

The output code is exactly the same but it appears the JS is cached into memory before the fields are populated when using the dynamic methods with Chrome returning the error:

TypeError: Cannot read property 'select' of null

Is this a limitation of Anjular and should I use jQuery? If so, how would I put this in a widget?

All help much appreciated

thanks

Aaron

[soufaouz]

Hello,

When inside ng-click, Angular already knows about your custum property, try to remove data biding {{}} as following:

<lui-button ng-click="app.field(settings.FilterDimension).selectMatch(settings.FilterValue)">Dynamic</lui-button>

Hope this helps !

Sofiane