<ma-point-values> & <ma-point-statistics> inside ng-if

---

Dear staff,

I have a question for creating my page. So I have created a page where I have a local variable inside the page which can be switched by a click of a button.

So i would like to put <ma-point-values> and <ma-point-statistics> inside a div which is created using ng-if. i.e something like this.

<div ng-if="cableid == 1">
    
<ma-point-values point="S1_S1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-statistics point="S1_S1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>
</div>

<div ng-if="cableid == 2">
    
<ma-point-values point="S1_S1_2" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2_2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3_2" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4_2" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5_2" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>   

<ma-point-statistics point="S1_S1_2" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2_2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3_2" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4_2" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>  


</div>

This is required because on some pages we might have too many datapoints and then I assume that the UI would get sluggish and slow if all points are queried.

So do I have to create a custom module which uses these directives? Because currently this is not working as I would like to.

Thanks,
Thomas

@thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

I have created a page where I have a local variable inside the page which can be switched by a click of a button.
So i would like to put <ma-point-values> and <ma-point-statistics> inside a div which is created using ng-if. i.e something like this.

OK, you can do that. No problems. Your code example looks fine.

@thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

This is required because on some pages we might have too many datapoints and then I assume that the UI would get sluggish and slow if all points are queried.

OK. Yes you are correct if you do too many queries at once you will likely see performance issues.

@thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

So do I have to create a custom module which uses these directives?

No, you do not have to. You posted the code and that will work fine.

@thomaseinasto said in <ma-point-values> & <ma-point-statistics> inside ng-if:

Because currently this is not working as I would like to.

What is wrong with your current solution that you posted? What would you like it to do? I don't know what you are asking for.

Dear Jared

Sorry for the confusion.

If this solution is used then output for <ma-point-values> and <ma-point-statistics> is not present on the page which is why I asked the question in the first place.

Simple markup of the start of the page:

<ma-get-point-value point="S1_S1" point-xid="ID28S1" ng-init="cableid = 1"></ma-get-point-value>
<ma-get-point-value point="S1_S2" point-xid="ID28S2"></ma-get-point-value>
<ma-get-point-value point="S1_S3" point-xid="ID28S3"></ma-get-point-value>
<ma-get-point-value point="S1_S4" point-xid="ID28S4"></ma-get-point-value>


<ma-get-point-value point="S1_S1_2" point-xid="ID29S1"></ma-get-point-value>
<ma-get-point-value point="S1_S2_2" point-xid="ID29S2"></ma-get-point-value>
<ma-get-point-value point="S1_S3_2" point-xid="ID29S3"></ma-get-point-value>
<ma-get-point-value point="S1_S4_2" point-xid="ID29S4"></ma-get-point-value>

<div ng-if="cableid == 1">
    
<ma-point-values point="S1_S1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-statistics point="S1_S1" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>
</div>

<div ng-if="cableid == 2">
    
<ma-point-values point="S1_S1_2" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S2_2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S3_2" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S4_2" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="S1_S5_2" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>   

<ma-point-statistics point="S1_S1_2" from="dateBar.from" to="dateBar.to" statistics="statsObj1"></ma-point-statistics>
<ma-point-statistics point="S1_S2_2" from="dateBar.from" to="dateBar.to" statistics="statsObj2"></ma-point-statistics>
<ma-point-statistics point="S1_S3_2" from="dateBar.from" to="dateBar.to" statistics="statsObj3"></ma-point-statistics>
<ma-point-statistics point="S1_S4_2" from="dateBar.from" to="dateBar.to" statistics="statsObj4"></ma-point-statistics>  


</div>


{{point1Values}}

{{statsObj1}}

I should see values at the bottom of the page which are related to cableid = 1, shouldn't I ?

<ma-get-point-value> is working correctly and shows the latest values via

{{S1_s1.value}}

If I bring these directives out of the <div ng-if="cableid==1"> or <div ng-if="cableid==2"> then the output for <ma-point-values> and <ma-point-statistics> work as they should.

Also:

core is 3.6.4, advanced components is 3.6.0

Ah OK I can see the problem. This is a scope issue, basically when you use a ng-if it creates a "scope", when the ma-point-values assigns a value to the variable "point1Values" it is created within this scope and you wont be able to see it outside this scope. See here if you want more details on this, however it is pretty technical.

All you need to know is this -

• Somewhere at the top of you page create an object
• Store all your variables inside this object

So your example becomes

<div ng-init="page={cableid: 1}"></div>

<ma-get-point-value point="page.S1_S1" point-xid="ID28S1"></ma-get-point-value>
<ma-get-point-value point="page.S1_S2" point-xid="ID28S2"></ma-get-point-value>
<ma-get-point-value point="page.S1_S3" point-xid="ID28S3"></ma-get-point-value>
<ma-get-point-value point="page.S1_S4" point-xid="ID28S4"></ma-get-point-value>


<ma-get-point-value point="page.S1_S1_2" point-xid="ID29S1"></ma-get-point-value>
<ma-get-point-value point="page.S1_S2_2" point-xid="ID29S2"></ma-get-point-value>
<ma-get-point-value point="page.S1_S3_2" point-xid="ID29S3"></ma-get-point-value>
<ma-get-point-value point="page.S1_S4_2" point-xid="ID29S4"></ma-get-point-value>

<div ng-if="page.cableid == 1">
    
<ma-point-values point="page.S1_S1" values="page.point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S2" values="page.point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S3" values="page.point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S4" values=page."page.point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S5" values="page.point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-statistics point="page.S1_S1" from="dateBar.from" to="dateBar.to" statistics="page.statsObj1"></ma-point-statistics>
<ma-point-statistics point="page.S1_S2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj2"></ma-point-statistics>
<ma-point-statistics point="page.S1_S3" from="dateBar.from" to="dateBar.to" statistics="page.statsObj3"></ma-point-statistics>
<ma-point-statistics point="page.S1_S4" from="dateBar.from" to="dateBar.to" statistics="page.statsObj4"></ma-point-statistics>
</div>


<div ng-if="page.cableid == 2">
    
<ma-point-values point="page.S1_S1_2" values="page.point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S2_2" values="page.point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S3_2" values="page.point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S4_2" values="page.point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="page.S1_S5_2" values="page.point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>   

<ma-point-statistics point="page.S1_S1_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj1"></ma-point-statistics>
<ma-point-statistics point="page.S1_S2_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj2"></ma-point-statistics>
<ma-point-statistics point="page.S1_S3_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj3"></ma-point-statistics>
<ma-point-statistics point="page.S1_S4_2" from="dateBar.from" to="dateBar.to" statistics="page.statsObj4"></ma-point-statistics>  

</div>

{{point1Values}}

{{statsObj1}}

Thanks Jared

This solves it.