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

Posted 2023-05-09

【中文标题】如何为 Freewall jQuery 插件创建 Angular 指令

【英文标题】：How to create Angular directive for Freewall jQuery Plugin

【发布时间】：2017-11-11 19:23:52

【问题描述】：

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

var temp = "<div class='cell' style='width:widthpx; height: heightpx; 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() 覆盖而破坏了它们。

【参考方案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:widthpx; height: heightpx; 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