javascript - 如何在猫头鹰旋转木马的 Angular 中制定指令?

标签 javascript jquery angularjs

你能告诉我如何在 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283de908080b3c0dd8b" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <link data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c410f1f1f2c5f4214" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="3.2.0" rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" />
     <link data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177578786364636576673a7464645724396f" rel="noreferrer noopener nofollow">[email protected]</a>" 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5b47034c41415a5d5a5c4f5e6e1e001f1e001e" rel="noreferrer noopener nofollow">[email protected]</a>" 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/

相关文章:

android - ionic : Why the Android keyboard "next" button try to validate a form?

css - 如何根据里面的文字设置元素的宽度?

javascript - NextJS .prepare() 实际上做了什么?

javascript - Twitter Bower 文件选择

JQUERY工具: is it possible to expose two elements?

javascript - 使用 javascript/jquery 的字体大小和颜色

jQuery [attribute] 选择器仅返回第一个元素,而不返回全部

javascript - 如何动态设置 Angular Material md-datepicker 指令的 md-min-date/md-max-date?

javascript - 单选按钮在 Chrome 和 IE 中消失

javascript - 如何使用我的签名证书生成预签名 URL 以反对 Amazon S3