Angular指令中的jquery插件只能工作一次

Question

我正在使用這個允許創建「pinterest」網格的jquery插件。我在Angular指令中集成了插件，並且在我第一次加載網頁時工作正常。但是，如果我導航到另一個路徑並返回到網格，它不再工作（它不會像編譯它那樣）。

實施例：

• 我通過轉到其中網格是（/食品）
• 然後我導航到此路徑（/配方）加載應用程序
• 然後我要回到此路徑（/食品）

該指令得到的電話，但該插件不會在DOM應用

角指令：

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

你的問題可能是相同的雙/多綁定事件處理程序，這可能會導致不良行爲。