angular 实现水平滚动 （调用iscroll）

app.directive("levelMenu",()=>{
    return {
        require:"levelMenu",
        restrict:"E",
        scope:{
            list:"=",
            select:"="
        },
        template:require("./LevelMenu.html")(),
        replace: true,
        controller:["$scope","$element","$attrs",($scope, $element, $attrs)=>{

            var myScroll=null
            $scope.init=()=>{myScroll = new IScroll( $element[0], {
                scrollX: true,
                scrollY: false
            })}
            $scope.$watch("list",function(){
                setTimeout(()=>{
                    var innerMenuWidth=0;
                    $($element[0]).find(".btn-level-hollow").each((index,element)=>{
                        innerMenuWidth+=$(element).width()
                    })
                    $($element[0]).find(".menu-inner").width(innerMenuWidth)

                    myScroll.refresh()
                },0)
            })
            $scope.click=(id)=>{
                $scope.select=id
            }
        }]
    }
})

模板：

<div class="cashier-main-level-menu" ng-init="init()">
    <div class="menu-inner">
        <ul>
            <li ng-repeat="vo in list"
                ng-click="click(vo.id)"
                ng-class="vo.id==select?'btn-level-hollow active':'btn-level-hollow'">
                <div class="item">
                    {{vo.name}}
                </div>
            </li>
        </ul>
    </div>

</div>