Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

HTL with Angularjs

Avatar

Level 4
Hi Guys,
Is it possible to call an angular value in sightly.
for example :
<div ng-repeat="source in split.sources">

  <sly data-sly-test.instanceName="${'{[source.index]}'}"/> //this is the value
  <div ng-view class="col col-xs-12 col-md-6 col-lg-4 wi-wizard__tab-content-box">
  <sly data-sly-resource="${@ path=instanceName, resourceType='app/components/content/wizard/split-sources'}"></sly>
  </div>

</div>                                                                      
                                                                          
                              
1 Reply

Avatar

Level 10

Conceptually, angular will execute on client side (browser) and HTL will execute on the author/publish server i.e. server side. When your DOM is rendered from server, it would have simple HTML without sly tags(they are already parsed at server) and your angular tags. The browser would then parse & execute this angular code in the browser itself and not on server side.

In my opinion, this code would not work because 'ng-repeat' would not be interpreted by AEM author/publish while parsing sly tags but by browser after the response/DOM is generated by AEM author/publish servers.

With this code, you'll end up with:

<div ng-repeat="source in split.sources">   // split.sources should be available to ng-scope for iteration
  <sly data-sly-test.instanceName="${'{[source.index]}'}"/>  // this sly tag would already be converted to normal HTML div tag and might throw error because source is not available unless you make js variable available to angular scope
  <div ng-view class="col col-xs-12 col-md-6 col-lg-4 wi-wizard__tab-content-box">
  <sly data-sly-resource="${@ path=instanceName, resourceType='app/components/content/wizard/split-sources'}"></sly> // this sly tag would already be converted to normal HTML div tags
  </div>

</div>  

HTH