CODEWITHSUNDEEP
jqueryangularjshtml
mono0123456789
mono0123456789

Reputation: 1

html5Gallery with angularjs

I want to display a gallery of videos in a modal with angular.js so I used https://html5box.com/ solution. But I have a problem to use my scope variables into class="html5gallery". 

<div class="html5gallery" data-skin="horizontal" data-width="700" data-height="500" >
<a href="images/Tulip_large.jpg"><img src="images/Tulip_small.jpg" alt="Tulips"></a>
<a  href="{{testscope}}"><img src="images/Colourful_Tulip_small.jpg" alt="{{testscope}}"></a>
<a href="images/Swan_large.jpg"><img src="images/Swan_small.jpg" alt="Swan on Lake"></a>
<a href="images/Big_Buck_Bunny.mp4"><img src="images/Red_Tulip_small.jpg" alt="Red Tulips"></a>
<a href="images/Sakura_Tree_large.mp4"><img src="images/Sakura_Tree_small.jpg" alt="Sakura Trees"></a>

it's seems to me that inside class=""html5gallery" i couldn't use angularjs variables its does not grasp {{variable Scope}} PS : html5gallery used to display a gallery of videos .. if you know other solutions to create gallery videos as html5 gallery do not hesitate to tell it to me

Upvotes: 0

Views: 199

Answers (1)

floribon
floribon

Reputation: 19193

If this HTML is within a controller (or directive) and you have testScope properlly set in your scope, then all you need to change is use ng-href and ng-attr-alt instead of href and alt so it can be processed by Angular:

<div class="html5gallery" data-skin="horizontal" data-width="700" data-height="500" >
  <a href="images/Tulip_large.jpg"><img src="images/Tulip_small.jpg" alt="Tulips"></a>
  <a ng-href="{{testscope}}"><img src="images/Colourful_Tulip_small.jpg" ng-attr-alt="{{testscope}}"></a>
  <a href="images/Swan_large.jpg"><img src="images/Swan_small.jpg" alt="Swan on Lake"></a>
  <a href="images/Big_Buck_Bunny.mp4"><img src="images/Red_Tulip_small.jpg" alt="Red Tulips"></a>
  <a href="images/Sakura_Tree_large.mp4"><img src="images/Sakura_Tree_small.jpg" alt="Sakura Trees"></a>
</div>

Upvotes: 2

Related Questions