javascript - 带有 ImgLiquid 的 Angular Js

Question

我正在开发一个应用程序，它需要使用 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>

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

有人有什么建议吗？

谢谢

Answer 1

最有可能的是，第一个工作的原因是因为你必须在某个地方有一段代码，比如 $(document).on('ready', function{$(".imgLiquidFill").imgLiquid ();}); 或类似的东西，但问题是您需要为使用 ng-repeat 呈现的元素调用 .imgLiquid digest 循环结束后，元素在浏览器中呈现。

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

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

你可以这样使用它:

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

查看:

  <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