Foundation 5 清除灯箱不适用于 angularjs 动态图像
Foundation 5 clearing lightbox not working with angularjs dynamic images
我正在尝试将 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>
有人知道如何让它发挥作用吗?
在测试时它抛出了 Uncaught ReferenceError: Modernizr is not defined
所以添加 http://www.modernizr.com/downloads/modernizr-latest.js,供 foundation.js
内部使用
根据 documentation $(document).foundation();
应该在 </body>
和 $(document).foundation();
初始化基础脚本之前,因此移出 angular 范围。
只需在此处添加我的 2 美分,因为引导 Modernizr 可能很繁重,如果您仅使用它来消除由 Foundation 元素单击事件传播的一些事件错误,则尤其无关紧要。
但是!有一个解决方法。只需扩展一个空的 Modernizr 原型即可为我清除 Foundation 错误,并且 Foundation 单击事件行为正常工作。
let Modernizr = {};
我正在尝试将 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>
有人知道如何让它发挥作用吗?
在测试时它抛出了 Uncaught ReferenceError: Modernizr is not defined
所以添加 http://www.modernizr.com/downloads/modernizr-latest.js,供 foundation.js
根据 documentation $(document).foundation();
应该在 </body>
和 $(document).foundation();
初始化基础脚本之前,因此移出 angular 范围。
只需在此处添加我的 2 美分,因为引导 Modernizr 可能很繁重,如果您仅使用它来消除由 Foundation 元素单击事件传播的一些事件错误,则尤其无关紧要。
但是!有一个解决方法。只需扩展一个空的 Modernizr 原型即可为我清除 Foundation 错误,并且 Foundation 单击事件行为正常工作。
let Modernizr = {};