How to create Angular directive for Freewall jQuery Plugin

Question

I need to execute some jquery in directive, im new in angular and i don`t know how to do this.

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");
        }

this is the query you can check this in https://github.com/kombai/freewall, i need to execute it in angular directive or if you know some more efficiency way, u can share it here

Read [AngularJS Developer Guide - Creating Custom Directives](https://docs.angularjs.org/guide/directive) — georgeawg, Jun 09 '17 at 17:34
Angular Material provides this functionality without relying on JQuery, which as @Mr_Perfect says, is bad practice in Angular. https://material.angularjs.org/latest/demo/gridList — VivaLaPanda, Jun 09 '17 at 18:22
Yeah, don't do this. Your next question will be "why aren't any of my Angular bindings working anymore?" and it's going to be because you destroyed them by overwriting with `$(...).html()`. — Daniel Beck, Jun 10 '17 at 13:29

Frank Modica · Answer 1 · 2017-06-10T13:50:28.887

I'm not sure about your requirements (do you need to pass data or callbacks to this directive?). But the general approach for creating a directive that calls a third-party plugin is something like this:

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>

Note that as stated in the comments, if you later need to add Angular directives inside the cells, you'll have to tell Angular to compile the generated html (or maybe use transclusion).

score 0 · Answer 2 · answered Jun 10 '17 at 16:58

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();
      });
    });
  };
});

For more information, see GitHub: FreeWall Issue #142

How to create Angular directive for Freewall jQuery Plugin

2 Answers2