Foundation 5清除灯箱不适用于angularjs动态图像答案

【问题标题】：Foundation 5 clearing lightbox not working with angularjs dynamic imagesFoundation 5清除灯箱不适用于angularjs动态图像
【发布时间】：2017-12-16 03:45:33
【问题描述】：

我正在尝试将 Zurb Foundation 5 中的清除灯箱组件用于我的 angularjs 应用程序，但我没有找到方法，示例代码在这里：

使用下面我得到的代码是一团糟，但它应该看起来像Foundation Clearing documentation

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet"/>
</head>
<body>       
    <div ng-app="app" ng-controller="ClearingController">
        <ul class="clearing-thumbs large-12 columns small-block-grid-4" data-clearing>
            <li ng-repeat="imagen in imagenes"><a href="{{imagen}}"><img ng-src="{{imagen}}"></a></li>
        </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script type="text/javascript">
                angular.module('app', [])
                        .controller('ClearingController', ['$scope', function($scope) {
                                $scope.imagenes = ["http://placehold.it/1000x1000&text=image1", "http://placehold.it/1000x1000&text=image2", "http://placehold.it/1000x1000&text=image3", "http://placehold.it/1000x1000&text=image4", "http://placehold.it/1000x1000&text=image5", "http://placehold.it/1000x1000&text=image6", "http://placehold.it/1000x1000&text=image7", "http://placehold.it/1000x1000&text=image8"];
                                $(document).foundation();
                            }]);

    </script>
</body>
</html>

有人知道如何让它工作吗？

【问题讨论】：

你能解释一下这里不工作的地方吗？
清除拇指不起作用，它看起来像 angularjs 应用程序内部的一团糟。如果您将示例代码复制到 plunker 或任何 html 文件中，您将看到它的外观，但它应该看起来像在 Foundation documentation 中。
工作正常：plnkr.co/edit/5vTUBcOLikQYEZNbcz2M?p=preview 边框不可见或任何其他我看不到的错误？
是的，对不起，我的意思是当你点击一张图片时，一切都变得一团糟

标签： javascript css angularjs zurb-foundation-5

【解决方案1】：

在测试时它抛出了Uncaught ReferenceError: Modernizr is not defined 所以添加http://www.modernizr.com/downloads/modernizr-latest.js，foundation.js内部使用

根据documentation $(document).foundation(); 应该在</body> 和$(document).foundation(); 之前初始化 Foundation 脚本，以便移出角度范围。

示例：http://codepen.io/anon/pen/eNwGQq

【讨论】：

【解决方案2】：

只需在此处添加我的 2 美分，因为引导 Modernizr 可能很繁重，如果您只是使用它来消除由 Foundation 元素点击事件传播的一些事件错误，则尤其是无关紧要的。

但是！有一个解决办法。只需扩展一个空的 Modernizr 原型就可以为我清除 Foundation 错误，并且 Foundation 点击事件行为正常工作。

let Modernizr = {};

【讨论】：