gpt4 book ai didi

javascript - 如何在猫头鹰旋转木马的 Angular 做出指示?

转载 作者:行者123 更新时间:2023-11-29 10:14:26 24 4
gpt4 key购买 nike

你能告诉我如何在 angular js 中制作指令吗?我需要在 js 中使用 owl carousel 插件,就像我在 jqm fiddle 中所做的那样 http://jsfiddle.net/ezanker/o9foej5L/1/.我需要在 Angular 使用指令中做同样的事情你能告诉我我将如何实现这个使用指令吗 http://plnkr.co/edit/4ySYwsqrBKUJUj6MwoRY?p=catalogue

<!DOCTYPE html>
<html>

<head>
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" />
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href=" http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" />

<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="script.js"></script>
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
</head>

<body>
<div id="owl-demo">
<div class="item"><p>one</p></div>
<div class="item"><p>two</p></div>
<div class="item"><p>three</p></div>
<div class="item"><p>four</p></div>
</div>
</body>

</html>

最佳答案

您可以使用这样的指令:

app.directive('owlCarousel', function() {
return {
restrict: 'A',
scope: {
owlOptions: '='
},
link: function(scope, element, attrs) {
$(element).owlCarousel(scope.owlOptions);
}
};
});

然后在 HTML 上将其添加为属性:

<div owl-carousel owl-options="owlOptions">
...
</div>

Demo

关于javascript - 如何在猫头鹰旋转木马的 Angular 做出指示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25686700/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com