SVG ma-selector and Watchlist

[Ralf]

Hi,

I need your help to solve a problem.

I have a watchlist and set a filter (Raumnr) via a button like this:

<ma-button label="Raum 10" tooltip="Raum 10 auswählen" raised="true" hue="hue-2" palette="primary" icon="home"
    ng-model="Raumnr" ng-click="Raumnr='ZT02O0100_ER002'"></ma-button>
    
<ma-button label="Raum 13" tooltip="Raum 13 auswählen" raised="true" hue="hue-2" palette="primary" icon="home"
    ng-model="Raumnr" ng-click="Raumnr='ZT02O0130_ER001'"></ma-button>

It works fine with no problems.
Now I want to change the filter with a click on a field inside a svg-element:

<ma-svg ng-include="'/rest/v2/file-stores/default/zt/zt_etage_2og.svg'" style="width: auto; height: 650px;">
<div ma-selector="#T_R010 tspan" ng-model="Raumnr" ng-click="Raumnr='ZT02O0100_ER002'" ng-bind="RT010.renderedValue"></div>
</ma-svg>

The value inside the svg-element is working but when I click on the element, nothing happens.
Where is the syntax-error?

Thanks,
Ralf

[CraigWeb]

Hi Ralf

I don't believe it is a syntax problem. Seems to me like a scope problem. I was able to work around the problem by useing ng-click="$rootScope.Raumnr='ZT02O0100_ER002'". I cant recommend using that as a work around tho.
Hopefully Jared can help.

[Ralf]

Hi CraigWeb,

it works with

<div ma-selector="#T_R010 tspan" ng-model="Raumnr" ng-click="$root.Raumnr='ZT02O0100_ER002'" ng-bind="RT010.renderedValue"></div>

Thank you!

[Jared Wiltshire]

@Ralf whenever you assign a variable like ng-click="Raumnr='ZT02O0100_ER002'" it will create the variable in the current scope. Using <ma-svg ng-include="..."> creates a new scope so any variable assigned inside this scope will not be visible to the outside/parent scope.

A lot of AngularJS directives (ng-include in this case) and all components will create a new scope. The easiest way to deal with this is to create an object in the outside scope and assign all your variables to this. e.g. at the top of your page's markup add this <div ng-init="pageData = {}"></div>, then whenever you need to assign a variable, assign it as a property on this object. e.g. ng-click="pageData.Raumnr='ZT02O0100_ER002'".

Avoid doing things like $rootScope.xyz = .. or $parent.xyz = ...

[CraigWeb]

Ha what a simple solution thanks for that tip.

[iperry]

Thanks Jared, that is a great tip. That might solve a few things I have encountered.