CODEWITHSUNDEEP
javascriptangularjsweb
MGE
MGE

Reputation: 912

Angular Js with ImgLiquid

I'm working into an applications which needs to use Angular's repeat functionality to print few informations about a specific client. That's pretty much the code that I have

<div ng-repeat="todo in todos | filter:search">
            <div class='resultShow' style='border-top:1px solid #000;padding:10px 15px 10px 15px;'>
                <div class='imgLiquidFill imgLiquidContent' style='width:100px; height:100px;display:inline-table;background-size:initial;'>
                    <img ng-src="Images/clients/logos/9991.jpg" />
                </div>
            </div>
</div>

The problem about it is that, while using the imgLiquid inside the ng-repeat, it's not working, if I try to do something like

<div>
            <div class='resultShow' style='border-top:1px solid #000;padding:10px 15px 10px 15px;'>
                <div class='imgLiquidFill imgLiquidContent' style='width:100px; height:100px;display:inline-table;background-size:initial;'>
                    <img ng-src="Images/clients/logos/9991.jpg" />
                </div>
            </div>
</div>

It works good... So might be something odd happening here.

Does anybody have any suggestions?

Thanks

Upvotes: 1

Views: 441

Answers (1)

Josep
Josep

Reputation: 13071

Most likely, the reason why the first one is working is because you must have somewhere a piece of code like $(document).on('ready', function{$(".imgLiquidFill").imgLiquid();}); or something similar, but the thing is that you need to call .imgLiquid for the elements that get rendered with your ng-repeat after the digest cycle has finished, once the elements have been rendered in your browser.

In order to do that I would create a directive for integrating ImgLiquid with Angular, something like this:

.directive('liquid', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
                $timeout(function () {
                    element.imgLiquid(scope[attr.liquid]);
                });
        }
    }
})

And you could use it like this:

Controller:

  $scope.liquidConfigurations =
  [
    {fill: true, horizontalAlign: "center", verticalAlign: "top"},
    {fill: false, horizontalAlign: "center", verticalAlign: "50%"},
    {fill: true, horizontalAlign: "50%", verticalAlign: "top"},
    {fill: false, horizontalAlign: "50%", verticalAlign: "bottom"},
    undefined
  ];

View:

  <div ng-repeat="liquidConfiguration in liquidConfigurations">
   {{$index+1}}
    <div liquid="liquidConfiguration" class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" ng-src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
  </div>

Working example

Upvotes: 3

Related Questions