Passing angular variable value in js from sightly | Community
Skip to main content
A
akshitaa8272040
New Participant
September 13, 2016
Solved

Passing angular variable value in js from sightly

  • September 13, 2016
  • 5 replies
  • 3821 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by akshitaa8272040

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

5 replies

A
akshitaa8272040AuthorAccepted solution
New Participant
September 13, 2016

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

Feike_Visser1
Feike_Visser1
Employee
September 13, 2016

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

A
akshitaa8272040Author
New Participant
September 13, 2016

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-manager.topic.html/forum__a0oj-following_uponthis.html

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

kautuk_sahni
kautuk_sahni
Employee
September 13, 2016

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-manager.topic.html/forum__a0oj-following_uponthis.html

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

Kautuk Sahni
Feike_Visser1
Feike_Visser1
Employee
September 13, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...