gpt4 book ai didi

angularjs - 根据屏幕大小更改 View

转载 作者:行者123 更新时间:2023-12-04 10:24:18 27 4
gpt4 key购买 nike

我知道之前有人问过类似的问题:

Change the templateUrl of directive based on screen resolution AngularJS

这是一年多前首次提出的问题,从那时起 AngularJS 就发生了一些变化。我很想知道是否还有其他方法可以实现类似的目标,因为我没有找到很多关于 templateUrl 交换的信息,所以也许我在这里吠错了树。

我有一个没有任何路由的单页应用程序。

html:

<body ng-app="App">
// lots of html same for both desktop/mobile
<my-dir></my-dir>
// even more here
</body>

模板1:
<p>Mobile</p>

模板2:
<p>Desktop</p>

我想渲染 模板 1 当屏幕低于 700px 和 模板 2 除此以外。模板改变了里面的内容 my-dir 指令 .例如,模板 1 呈现列表,模板 2 呈现表格。

另一个要求是在可能的情况下使其具有响应性(又名模板会随着您调整窗口大小而改变)

目前我可以使用上述问题的解决方案,但还有其他方法吗?

最佳答案

在您的 Controller 中:

$scope.includeDesktopTemplate = false;
$scope.includeMobileTemplate = false;
var screenWidth = $window.innerWidth;

if (screenWidth < 700){
$scope.includeMobileTemplate = true;
}else{
$scope.includeDesktopTemplate = true;
}

html模板:
<body ng-app="App">
<p ng-if="includeMobileTemplate">Mobile</p>
<p ng-if="includeDesktopTemplate">Desktop</p>
</body>

希望能帮助到你

关于angularjs - 根据屏幕大小更改 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33303274/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com