javascript - 与ImgLiquid的Angular Js

我正在研究需要使用Angular的重复功能来打印有关特定客户端的少量信息的应用程序。
那差不多就是我拥有的代码

<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>

问题是，在ng-repeat中使用imgLiquid时，如果我尝试执行类似的操作，则无法正常工作

<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>

效果很好...所以这里可能发生了一些奇怪的事情。

有人有什么建议吗？

谢谢

最佳答案

最有可能的原因，第一个起作用的原因是因为您必须在某处有一段代码，例如$(document).on('ready', function{$(".imgLiquidFill").imgLiquid();});或类似的东西，但事实是您需要为用.imgLiquid ng-repeat循环结束后，一旦在浏览器中呈现了元素，便会显示cc>。

为了做到这一点，我将创建一个将ImgLiquid与Angular集成的指令，如下所示：

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

您可以这样使用它：

控制器：

  $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
  ];

视图：

  <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

关于javascript - 与ImgLiquid的Angular Js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26153652/