Passing angular variable value in js from sightly

[akshitaa8272040]

Hi,

I have a angular variable {{example.variable}} which is coming from angular controller.

{{example.variable}} has a value(4 digit code) - 1001

I wanted to do something like below(passing the angular variable from sightly to javascript file):

<div data-sly-use.data="${'example.js' @fieldName = '{{example.variable}}' }"/>

In example.js file:::::

var abc = this.fieldName; (reading the property from html file)

out.println(abc) //Result is 1001

out.println(abc.length) //Result is 17(Surprised. Was expecting 4)

I printed the abc character by character then and the result came as "{{example.variable}}" and not the value inside the angular variable(i.e 1001).

Please let me know if there is any way to pass the dynamic value of angular variable.

Thanks

Akshita

[Feike_Visser1]

[Edited by kautuk]

HTML Template Language (formerly known as Sightly) is parsed only serverside, if you need pass something you need to do it via url-params.

[kautuk_sahni]

As mentioned by Feike (Godfather of HTML Template Language formerly as Sightly) that is the best way.

Please have a look at this similar forum post:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

// In this post, Feike, shared working code as well.

    JAVA:
    import io.sightly.java.api.Record;
    import com.adobe.cq.sightly.WCMUse;
 
    public class UseTest extends WCMUse {
 
        public Record params=null;
    
        public String p;
    
        @Override
        public void activate() throws Exception {
            params = get("params", Record.class);
            p = (String) params.get("dateRange");
       }
    }
    Sightly:

    <div data-sly-use.newsList="newsList.js">
    ${newsList.dateRange}
            <div data-sly-use.articles="${'yourpackage.UseTest' @ params=newsList}">
                ${articles.p}
            </div>
    </div>

I hope this will help.

Thanks and Regards

Kautuk Sahni

[akshitaa8272040]

kautuksahni wrote...

As mentioned by Feike (Godfather of HTML Template Language formerly as Sightly) that is the best way.

Please have a look at this similar forum post:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

// In this post, Feike, shared working code as well.

    JAVA:
    import io.sightly.java.api.Record;
    import com.adobe.cq.sightly.WCMUse;
 
    public class UseTest extends WCMUse {
 
        public Record params=null;
    
        public String p;
    
        @Override
        public void activate() throws Exception {
            params = get("params", Record.class);
            p = (String) params.get("dateRange");
       }
    }
    Sightly:

    <div data-sly-use.newsList="newsList.js">
    ${newsList.dateRange}
            <div data-sly-use.articles="${'yourpackage.UseTest' @ params=newsList}">
                ${articles.p}
            </div>
    </div>

I hope this will help.

Thanks and Regards

Kautuk Sahni

Thanks for the response Feike/Kautuk,

However, my question is little different 🙂

I have a angular variable {{errorcode}} with value as 1001

Above variable I was trying to pass in component js(Using Javascript API) through below line of code:

<div data-sly-use.articles="${'yourpackage.js' @ params= {{errorcode}}}"> //Not working

errorcode is basically coming from angular code(controller.js) not from the dialog field. The above mentioned solution works fine if i am dealing with dialog values.

First  - Is it possible to achieve this without java?

Second - Can't I directly pass angular variable in sightly component js??

Thanks,

Akshita

[Feike_Visser1]

To me the {{errorcode}} is empty when it is being parsed server-side.

[akshitaa8272040 · Accepted solution]

Feike Visser wrote...

To me the {{errorcode}} is empty when it is being parsed server-side.

Hi Feike,

I got the solution for my issue. Thanks for the quick response 🙂

I was following wrong approach.

By Using below angular directive in component html itself, i can directly use the angular variable and compare it with sightly variable for desired results.

<data-sly-use.var  = "example.js">

<div ng-if="errorcode==${var.value}"> //Requirement - Wanted to compare angular variable with sightly variable

Thanks

Akshita