基础5清除灯箱不工作与angularjs动态图像



我试图使用清除lightbox组件从Zurb Foundation 5到我的angularjs应用程序,但我还没有找到的方式,示例代码在这里:

使用下面的代码我得到的是一个混乱,但它应该看起来像基础清算文档

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

有谁知道如何让它工作吗?

在测试时抛出Uncaught ReferenceError: Modernizr is not defined新增http://www.modernizr.com/downloads/modernizr-latest.js, foundation.js内部使用

根据文档,$(document).foundation();应该在</body>$(document).foundation();之前初始化Foundation脚本,以便移出角作用域。

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

只是在这里添加我的2美分,因为引导Modernizr可能很重,特别是如果您只使用它来消除由Foundation元素单击事件传播的一些事件错误。

但是!有一个解决办法。只是扩展一个空的Modernizr原型为我清除了基础错误,并且基础点击事件行为正常工作。

let Modernizr = {};

相关内容

  • 没有找到相关文章

最新更新