Angular指令中的jQuery插件仅可使用一次

Question

I am using this jquery plugin that allows to create a "pinterest" grid. I integrated the plugin in an Angular directive and it works fine when I load the webpage for the first time. However, if I navigate to another path and go back to the grid, it doesn't work anymore(it doesn't compile as it should).

Example:

• I load the application by going to where the grid is(/food)
• Then I navigate to this path(/recipe)
• Then I go back to this path(/food)

The directive gets call, but the plugins doesn't apply on the dom

Angular directive:

'use strict';

angular
    .module('app')
    .directive('foodDirective', foodDirective);

foodDirective.$inject= ['$timeout','$compile'];

function foodDirective($timeout,$compile) {

    return {

    restrict: 'A',
    link: function(scope, element, attrs) {

                element.pinterest_grid({

                        no_columns: 4,
                        padding_x: 10,
                        padding_y: 10,
                        margin_bottom: 50,
                        single_column_breakpoint: 700

                    });;
    }
};
}

Html

<section food-direction><!--some html--></section>

Answer 1

Try modifying your "link" function as so:

function(scope, element, attrs) {

  element.pinterest_grid({
    no_columns: 4,
    padding_x: 10,
    padding_y: 10,
    margin_bottom: 50,
    single_column_breakpoint: 700
  });

  scope.$on('$destroy', function(){
    // remove all event handlers that were
    // bound by the pinterest_grid plugin
    // (plugin "destroy" method if there is one)
  });
}

Your issue may be double/multiple bindings of the same event handlers, which can cause undesired behavior.