html5Gallery with angularjs

Question

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

floribon · Accepted Answer · 2015-04-28 22:34:59Z

2

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>

answered Apr 28, 2015 at 22:34

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

deowk Over a year ago

do you still need to escape the $scope variables in directives like {{testScope}}?

floribon Over a year ago

What do you mean by "escape the $scope variables"?

deowk Over a year ago

I mean normally in a directive you could just do something like --> ng-model="someScopeVariable" instead of ng-model="{{someScopeVariable}}, but when you use normal html attributes you would need to escape these variables so angular can process them --> value="{{someScopeVariable}}"

floribon Over a year ago

There are three way of binding variables in angular. The two-way binding such as ng-model or the one-way such as ng-click take an expression (with no "escaping"). However the third binding is an interpolation used by ng-href, ng-bind or ng-src for instance and requires brackets {{}}. You should open a new question if you want to learn more about this.

mono0123456789 Over a year ago

thanks @floribon i have tried your proposition but it's seems they don't understand angularjs inside class="html5gallery" and when i tried to look into html5gallery class it's an independent page ! you can take a look here: outshinesolutions.com/js/html5gallery/html5gallery.js

|

Collectives™ on Stack Overflow

html5Gallery with angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related