angularjs响应（无需浏览器刷新）

我正在使用一个名为angular slick的外部插件。 我的要求是，我希望桌面上有3张幻灯片，而手机上只有1张。我不想为此使用jquery 我已经通过我的代码实现了这一点，但唯一的问题是，当我调整浏览器的大小时，我必须强制浏览器刷新以查看响应的更改。 因为我的是单页应用程序，所以刷新没有意义。我是否可以在不刷新的情况下使用angular或其他一些概念来实现同样的效果（不允许Jquery）我的html如下所示

<slick infinite=true slides-to-show={{itemToShow}} slides-to-scroll=3 class="slider multiple-items">  
<div style="background-color: red" ng-repeat="item in items">
 <h3>{{item}}</h3>
</div>
</slick>

{{item}}

main.js

angular.module('slickApp')
.controller('myctrl', ['$scope', function($scope){
$scope.items = [1,2,3,4,5,7,8]; $scope.itemToShow = 3;
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;


window.onresize = function(event)
{
document.location.reload(true);
}


if ( width < 600)
{
$scope.itemToShow = 1;
}
}]);

angular.module（'slickApp'））
.controller（'myctrl'，['$scope'，函数（$scope）{
$scope.items=[1,2,3,4,5,7,8]；$scope.itemToShow=3；
var width=window.innerWidth
||document.documentElement.clientWidth
||document.body.clientWidth；
window.onresize=函数（事件）
{
文档。位置。重新加载（true）；
}
如果（宽度<600）
{
$scope.itemToShow=1；
}
}]);

试试这个：

window.onresize = function(event) {
    width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width < 600) {
        $scope.itemToShow = 1;
    }
};

window.onresize=函数（事件）{
宽度=window.innerWidth | | | document.documentElement.clientWidth | | document.body.clientWidth；
如果（宽度<600）{
$scope.itemToShow=1；
}
};

只需删除

document.location.reload（true）在
窗口内。打开resize
功能，然后用上面的代码替换

希望这有帮助