使用 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