HTL with Angularjs

anelem1760873 23-01-2019
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>                                                                      
                                                                          
                              

Mark Solution

Are these answers useful?
Help other community members by marking useful answers as accepted.

Accepted Solutions (0)

Answers (1)

Answers (1)

gauravb41175071
MVP
23-01-2019

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