Question

我正在使用listnav插件jQuery listnav来过滤我的数据结果。我已经创建了一个调用listnav（）方法的指令。

当我再次使用新结果（样本中的字母A）绑定ng-repeat时，插件会创建另一个导航栏。

请在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 &amp; 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 &amp; Gravel (Wholesale)"},
        {name: "School Supplies (Wholesale)"},
        {name: "Schools &amp; Educational Services"},
        {name: "Schools - Nursery &amp; Kindergarten Academic"},
        {name: "Vacuum Cleaners - Household - Dealers"},
        {name: "Vending Machines"},
        {name: "Ventilating Systems - Cleaning"},
        {name: "Wallpapers &amp; Wallcoverings - Installation"},
        {name: "Yoga Instruction"},
        {name: "Youth Organizations &amp; 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

您在致电loadNav()时再次呼叫send()功能。

$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

使用AngularJS重新绑定listnav插件

1 个答案: