AngularJS ui根据窗口宽度切换手风琴

我希望在浏览器低于某个宽度时以编程方式添加。我想当

$window

手表报告宽度小于400px时，我可能会破坏手风琴，如果没有，我会重新启动它。但在搜索了几个小时后，这似乎是一个愚蠢的想法。有没有一种方法可以做到这一点，或者有更好的方法来归档相同的结果？

好的，对于所有可能面临类似问题的人来说，这就是我们最终要做的：

在Angular配置中，我们添加了一个动态路由器： 现在我们得到了移动和桌面的两个视图，它们都在相同的内容中绘制，但将它们包装到手风琴或另一个容器中

---

这似乎很有效，希望能帮助其他互联网旅行者。

你可以在宽度小于400px时使accordion的父容器不可见，在其更大时使其可见。如果我使父容器不可见，我就没有什么可显示的了。我试图做的是使用标记，当浏览器在某个宽度以下时，将容器向左浮动。所以基本上去掉了手风琴的功能。。。

$routeProvider
.when('/:a', {
    template: '<div data-ng-include="templateUrl">Loading...</div>',
    controller: 'DynamicController'
})

.controller('DynamicController', function ($scope, $rootScope, $routeParams) {
var mobile = false; //set desktop first as mobil has more logic
    var maxWidth = 768; //adjust this value in media queries aswell!
    var _isMobile = "";
    //listen for changes on the scope var windowWidth
    $rootScope.$watch('windowWidth',function(){
        //check that we have not exceeded our max width
        if($rootScope.windowWidth < maxWidth) {
            _isMobile = "mobile"; //set the current view based on the width to mobile
        }
        else {
            _isMobile = "desktop"; //set the current view based on the width to desktop
        }
        $scope.templateUrl = function() {
            var temp = (_isMobile ? _isMobile : 'desktop');
            return 'views/' + temp + '.html';
        }(); //immediate gets called every time the windowWidth var changes passes in the current required view as a string.
    });
})

angular.module('app.config',[])
.directive('resize', function ($window) {
    return {
        controller: function ($scope, $rootScope) {
            $rootScope.windowWidth = $window.innerWidth;
            angular.element($window).bind('resize', function () {
                $rootScope.$apply(function () {
                    $rootScope.windowWidth = $window.innerWidth;
                });
            });

        }
    };
});