Question

我正在使用这个jquery插件，可以创建一个＆＃34; pinterest＆＃34;网格。我将插件集成到Angular指令中，当我第一次加载网页时它工作正常。但是，如果我导航到另一条路径并返回到网格，它就不再起作用了（它不会按照它应该编译）。

示例：

我通过转到网格（/ food）
然后我导航到这条路径（/ recipe）
然后我回到这条路（/食物）

该指令被调用，但插件不适用于dom

Angular指令：

'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

尝试修改“链接”功能：

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

您的问题可能是相同事件处理程序的双重/多重绑定，这可能会导致意外行为。

Angular指令中的Jquery插件只能运行一次

1 个答案: