使用AngularJS重新綁定listnav插件

Question

我使用listnav插件jQuery listnav來過濾我的數據結果。我創建了一個調用listnav（）方法的指令。

當我再次將ng-repeat與新結果（示例中的字母A）綁定時，該插件會創建另一個導航欄。

請，看看我的樣品中http://codepen.io/anon/pen/XbwVWZ?editors=101

<div style="height: 50px"></div> 

<div ng-app="myApp" ng-controller="MyCtrl">   
    <input type="button" ng-click="send()" value="Load letter A"></input> 
    <hr>  
    <ul id="demoOne" class="demo" listnav> 
     <li ng-repeat="i in items" ng-bind="i.name"></li> 
    </ul> 

</div> 

$(function(){ 
//$('#demoOne').listnav(); 

$('.demo a').click(function(e) { 
    e.preventDefault(); 
}); 
}); 

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', MyCtrl); 

function MyCtrl($scope) { 
    var m = [ 
     {name: "411 Services"}, 
     {name: "Accountants"}, 
     {name: "Acupuncture"}, 
     {name: "Human Resource Consultants"}, 
     {name: "Importers"}, 
     {name: "Industrial - Equipment & Supplies (Wholesale)"}, 
     {name: "Investments"}, 
     {name: "Janitor Service"}, 
     {name: "Jewelers (Wholesale)"}, 
     {name: "Jewelers - Retail"}, 
     {name: "Restaurants - Barbecue"}, 
     {name: "Roofing - Materials"}, 
     {name: "Roofing - Service Consultants"}, 
     {name: "Sand & Gravel (Wholesale)"}, 
     {name: "School Supplies (Wholesale)"}, 
     {name: "Schools & Educational Services"}, 
     {name: "Schools - Nursery & Kindergarten Academic"}, 
     {name: "Vacuum Cleaners - Household - Dealers"}, 
     {name: "Vending Machines"}, 
     {name: "Ventilating Systems - Cleaning"}, 
     {name: "Wallpapers & Wallcoverings - Installation"}, 
     {name: "Yoga Instruction"}, 
     {name: "Youth Organizations & Centers"}, 
     {name: "Zilch"} 
    ]; 

    $scope.items = m; 

    $scope.send = function(){ 
     var n = [    
      {name: "Accountants"}, 
      {name: "Acupuncture"} 
     ];    

     $scope.items = n; 
     $scope.loadNav(); 
    }; 
} 

myApp.directive('listnav', function($timeout){ 
    return { 
     restrict: 'A', 
     replace: false, 
     link: function($scope, elem, attrs){    

      $scope.loadNav = function(){ 
       $timeout(function(){ 
        $(elem).listnav(); 
       }); 
      }; 

      $scope.loadNav(); 
     } 
    }; 
}); 

Answer 1

你對你的呼叫send()再次調用您的loadNav()功能。

$scope.send = function(){ 
    var n = [    
     {name: "Accountants"}, 
     {name: "Acupuncture"} 
    ];    

    $scope.items = n; 
    //$scope.loadNav(); // this change 
}; 

Codepen update

編輯基於評論

你可以刪除以前的一個;

$scope.send = function(){ 
    var n = [    
     {name: "Accountants"}, 
     {name: "Acupuncture"} 
    ];    

    $scope.items = n; 
    $(".listNav").remove(); // added this 
    $scope.loadNav(); 
}; 

Codepen update