Question

我想使用Angular通过此下拉列表进行多选：

http://tympanus.net/Development/ResponsiveMultiLevelMenu/index5.html

该结构适用于jQuery，但是当我想添加AngularJS时，我遇到了问题。只有第一级有效。也许这是一个范围问题，但我不太熟悉它。

这是一个与jQuery一起使用的演示（扩展视图窗口以便很好地显示）

http://jsfiddle.net/x6h54vey/

这是我的指示：

app.directive('selectFilter', function(){
    return{
        restrict: 'E',
        templateUrl: "select-filter.html",
        controller: function(){
            this.filters = filters_tab;
        },
        controllerAs: "selectFilter",
        link: function(scope, elem, attrs) {
        // CALL PLUGIN DLMENU
        $(elem).dlmenu({
            animationClasses : { classin : 'dl-animate-in-4', classout : 'dl-animate-out-4' }
        });
        }

    };
});

我的指示模板：

<button class="dl-trigger">Filter</button>
<ul class="dl-menu">
    <li ng-repeat="list in selectFilter.filters | orderBy: 'order'" ng-include="'field_renderer.html'"></li>
    <!-- Recursive template -->
    <script type="text/ng-template" id="field_renderer.html">
        <a ng-if="list.childs" href="#">{{list.name}}</a>
        <a ng-if="!list.childs" class="option" ng-class="{active: hover}" href="#">{{list.name}}</a>

        <ul ng-if="list.childs" class="dl-submenu">
            <li ng-repeat="list in list.childs | orderBy: 'order'" ng-include="'field_renderer.html'">
             </li>
        </ul>
    </script>
</ul>

我的演示。只有第一级有效：

http://plnkr.co/edit/NCLnd3DB8X7LA80J6hJE

此外，如果您有建议进行优化，请不要犹豫。

谢谢！

Angular multi-select和jQuery插件

0 个答案: