Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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>

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


  • 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.

  • 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!

  • @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 $ = .. or $ = ...

  • Ha what a simple solution thanks for that tip.

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