如何将此 JQuery 插件重写为 AngularJS

Question

我这里有一个代码，我想让它可用于 AngularJS。这是原始插件 PAPER COLLAPSE 我想在 AngularJS 项目中使用它，这样我就可以 ng-repeat

这是 jQuery 插件的代码

(function() {
  (function($) {
    'use strict';
    $.fn.paperCollapse = function(options) {
      var settings;
      settings = $.extend({}, $.fn.paperCollapse.defaults, options);
      $(this).find('.collapse-card__heading').add(settings.closeHandler).click(function() {
        if ($(this).closest('.collapse-card').hasClass('active')) {
          settings.onHide.call(this);
          $(this).closest('.collapse-card').removeClass('active');
          $(this).closest('.collapse-card').find('.collapse-card__body').slideUp(settings.animationDuration, settings.onHideComplete);
        } else {
          settings.onShow.call(this);
          $(this).closest('.collapse-card').addClass('active');
          $(this).closest('.collapse-card').find('.collapse-card__body').slideDown(settings.animationDuration, settings.onShowComplete);
        }
      });
      return this;
    };
    $.fn.paperCollapse.defaults = {
      animationDuration: 400,
      easing: 'swing',
      closeHandler: '.collapse-card__close_handler',
      onShow: function() {},
      onHide: function() {},
      onShowComplete: function() {},
      onHideComplete: function() {}
    };
  })(jQuery);

}).call(this);

谢谢

Answer 1

很简单，看这个plunk。您可能需要调整 css abit。

没有固定的方法来做 css 只有 slideUp/slideDown，但如果您不介意包括 jquery，您可以随时在 card.$active 上添加一个手表，并且通过 jquery.

做幻灯片

如何将此 JQuery 插件重写为 AngularJS

How to rewrite this JQuery plugin into AngularJS

angularjs

angularjs-directive

angularjs-ng-repeat