如何为 Freewall jQuery 插件创建 Angular 指令答案

【问题标题】：How to create Angular directive for Freewall jQuery Plugin如何为 Freewall jQuery 插件创建 Angular 指令
【发布时间】：2017-11-11 19:23:52
【问题描述】：

我需要在指令中执行一些 jquery，我是 Angular 的新手，我不知道该怎么做。

var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
        var w = 1, html = '', limitItem = 49;
        for (var i = 0; i < limitItem; ++i) {
            w = 200 +  200 * Math.random() << 0;
            html += temp.replace(/\{height\}/g, 200).replace(/\{width\}/g, w).replace("{index}", i + 1);
        }
        $("#freewall").html(html);

        var wall = new Freewall("#freewall");
        wall.reset({
            selector: '.cell',
            animate: true,
            cellW: 20,
            cellH: 200,
            onResize: function() {
                wall.fitWidth();
            }
        });
        wall.fitWidth();
        // for scroll bar appear;
        $(window).trigger("resize");
        }

这是您可以在https://github.com/kombai/freewall 中检查的查询，我需要在角度指令中执行它，或者如果您知道更高效的方式，您可以在这里分享

【问题讨论】：

永远不要使用带角度的 Jquery。强烈推荐。
阅读AngularJS Developer Guide - Creating Custom Directives
Angular Material 在不依赖 JQuery 的情况下提供此功能，正如 @Mr_Perfect 所说，这在 Angular 中是不好的做法。 material.angularjs.org/latest/demo/gridList
是的，不要这样做。您的下一个问题将是“为什么我的任何 Angular 绑定都不再工作了？”这将是因为您通过使用$(...).html() 覆盖而破坏了它们。

标签： jquery angularjs angularjs-directive freewalljs

【解决方案1】：

我不确定您的要求（您是否需要向该指令传递数据或回调？）。但是创建调用第三方插件的指令的一般方法是这样的：

var app = angular.module('yourApp', []);

app.directive('yourDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            if (!attrs.id) {
                return;
            }

            var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
            var w = 1, html = '', limitItem = 49;
            for (var i = 0; i < limitItem; ++i) {
                w = 200 + 200 * Math.random() << 0;
                html += temp.replace(/\{height\}/g, 200).replace(/\{width\}/g, w).replace("{index}", i + 1);
            }
            elem.html(html);

            var wall = new Freewall("#" + attrs.id);
            wall.reset({
                selector: '.cell',
                animate: true,
                cellW: 20,
                cellH: 200,
                onResize: function () {
                    wall.fitWidth();
                }
            });
            wall.fitWidth();
            // for scroll bar appear;
            $(window).trigger("resize");
        }
    };
});

<div your-directive id="freewall"></div>

请注意，如 cmets 中所述，如果您以后需要在单元格中添加 Angular 指令，则必须告诉 Angular 编译生成的 html（或者可能使用嵌入）。

【讨论】：

【解决方案2】：

app.directive('theFreewall', function() {
  return function(scope, element, attrs) {
    scope.$on('LastBrick', function(event){
      var wall = new freewall("#freewall");
      wall.reset({
        selector: '.brick',
        animate: true,
        cellW: 200,
        cellH: 'auto',
        onResize: function() {
          wall.fitWidth();
        }
      });
      wall.container.find('.brick img').load(function() {
        wall.fitWidth();
      });
    });
  };
});

欲了解更多信息，请参阅GitHub: FreeWall Issue #142

【讨论】：